<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="kener.linfeng@gmail.com">
<title>ECharts · Doc</title>

<link rel="shortcut icon" href="./asset/ico/favicon.png">

<link href="./asset/css/font-awesome.min.css" rel="stylesheet">
<link href="./asset/css/bootstrap.css" rel="stylesheet">
<link href="./asset/css/carousel.css" rel="stylesheet">
<link href="./asset/css/echartsHome.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<!-- Fixed navbar -->
	<div class="navbar navbar-default navbar-fixed-top" role="navigation"
		id="head"></div>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="col-md-3">
				<div class="affix panel col-md-3" id="accordion">
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="accordion-toggle" data-toggle="collapse"
								data-parent="#accordion" href="#collapse-description">
								<strong>Contents</strong>
							</div>
						</div>
						<div id="collapse-description" class="panel-collapse collapse in">
							<div class="panel-body">
								<div id="toc">
									<ul>
										<li><a href="#Introduction">Introduction</a></li>
										<li><a href="#Glossary">Glossary</a></li>
										<li><a href="#Chart-Types">Chart Types</a></li>
										<ul>
											<li><a href="#Line">line</a></li>
											<li><a href="#Bar">bar</a></li>
											<li><a href="#Scatter">scatter</a></li>
											<li><a href="#Candlestick">candlestick</a></li>
											<li><a href="#Pie">pie</a></li>
											<li><a href="#Radar">radar</a></li>
											<li><a href="#Chord">chord</a></li>
											<li><a href="#Force">force</a></li>
											<li><a href="#Map">map</a></li>
											<li><a href="#Gauge">gauge</a></li>
											<li><a href="#Funnel">funnel</a></li>
											<li><a href="#eventRiver">eventRiver</a></li>
											<li><a href="#treemap">treemap</a></li>
											<li><a href="#treeChart">tree</a></li>
											<li><a href="#venn">venn</a></li>
											<li><a href="#wordCloud">wordCloud</a></li>
										</ul>
										<li><a href="#Import-ECharts">Import ECharts</a></li>
										<ul>
											<li><a href="#Import-ECharts1">modular package
													import</a></li>
											<li><a href="#Import-ECharts2">modular single file
													import ( <b>preferred</b> )
											</a></li>
											<li><a href="#Import-ECharts3">plain single file
													import</a></li>
										</ul>
										<li><a href="#Custom-Build-Echarts-Single-File">Custom
												Build ECharts Single File</a></li>
										<li><a href="#Initialization">Initialization</a></li>
										<li><a href="#Instance-Methods">Instance Methods</a></li>
										<li><a href="#Options">Options</a></li>
										<ul>
											<li><a href="#Option">option</a></li>
											<li><a href="#Timeline">timeline</a></li>
											<li><a href="#Title">title</a></li>
											<li><a href="#Toolbox">toolbox</a></li>
											<li><a href="#Tooltip">tooltip</a></li>
											<li><a href="#Legend">legend</a></li>
											<li><a href="#DataRange">dataRange</a></li>
											<li><a href="#DataZoom">dataZoom</a></li>
											<li><a href="#RoamController">roamController</a></li>
											<li><a href="#Grid">grid</a></li>
											<li><a href="#Xaxis">xAxis</a></li>
											<li><a href="#Yaxis">yAxis</a></li>
											<li><a href="#Axis">axis</a></li>
											<ul>
												<li><a href="#AxisAxisline">axisLine</a></li>
												<li><a href="#AxisAxistick">axisTick</a></li>
												<li><a href="#AxisAxislabel">axisLabel</a></li>
												<li><a href="#AxisSplitline">splitLine</a></li>
												<li><a href="#AxisSplitarea">splitArea</a></li>
												<li><a href="#AxisData">data</a></li>
											</ul>
											<li><a href="#Polar">polar</a></li>
											<li><a href="#Series">series (universal)</a></li>
											<ul>
												<li><a href="#SeriesCartesian">series (Cartesian)</a></li>
												<li><a href="#SeriesPie">series (pie) </a></li>
												<li><a href="#SeriesRadar">series (radar) </a></li>
												<li><a href="#SeriesMap">series (map) </a></li>
												<li><a href="#SeriesForce">series (force) </a></li>
												<li><a href="#SeriesChord">series (chord) </a></li>
												<li><a href="#SeriesGauge">series (gauge) </a></li>
												<li><a href="#SeriesFunnel">series (funnel) </a></li>
												<li><a href="#SeriesEventRiver">series (eventRiver)</a></li>
												<li><a href="#SeriesTreemap">series (treemap)</a></li>
												<li><a href="#SeriesTree">series (tree)</a></li>

												<li><a href="#SeriesVenn">series (venn)</a></li>
												<li><a href="#SeriesWordCloud">series (wordCloud)</a></li>
												<li><a href="#SeriesData">data</a></li>
												<li><a href="#SeriesMarkPoint">markPoint</a></li>
												<ul>
													<li><a href="#SeriesMarkPointData">data</a></li>
												</ul>
												<li><a href="#SeriesMarkLine">markLine</a></li>
												<ul>
													<li><a href="#SeriesMarkLineData">data</a></li>
												</ul>
											</ul>
											<li><a href="#ItemStyle">itemStyle</a></li>
											<li><a href="#LineStyle">lineStyle</a></li>
											<li><a href="#AreaStyle">areaStyle</a></li>
											<li><a href="#TextStyle">textStyle</a></li>
											<li><a href="#Loadingoption">loadingOption</a></li>
											<li><a href="#NoDataLoadingOption">noDataLoadingOption</a></li>
											<li><a href="#BackgroundColor">backgroundColor</a></li>
											<li><a href="#Color">color</a></li>
											<li><a href="#SymbolList">symbolList</a></li>
											<li><a href="#RenderAsImage">renderAsImage</a></li>
											<li><a href="#Calculable">calculable</a></li>
											<li><a href="#CalculableColor">calculableColor</a></li>
											<li><a href="#CalculableHolderColor">calculableHolderColor</a></li>
											<li><a href="#NameConnector">nameConnector</a></li>
											<li><a href="#ValueConnector">valueConnector</a></li>
											<li><a href="#Animation">animation</a></li>
											<li><a href="#AddDataAnimation">addDataAnimation</a></li>
											<li><a href="#AnimationThreshold">animationThreshold</a></li>
											<li><a href="#AnimationDuration">animationDuration</a></li>
											<li><a href="#animationDurationUpdate">animationDurationUpdate</a>
											</li>
											<li><a href="#AnimationEasing">animationEasing</a></li>
										</ul>
										<li><a href="#GraphDataStructure">Graph data
												structure</a></li>
										<ul>
											<li><a href="#categories">categories</a></li>
											<li><a href="#nodes(data)">nodes(data)</a></li>
											<li><a href="#GraphLinks">links</a></li>
											<li><a href="#GraphMatrix">matrix</a></li>
										</ul>
										<li><a href="#Multi-Level-Control">Multi-Level
												Control</a></li>
										<li><a href="#Appendix-Map-Extension">Appendix: Map
												Extension</a></li>
										<li><a href="#Appendix-Component-and-Chart-Instances">Appendix:
												Component and Chart Instances</a></li>
										<ul>
											<li><a href="#Appendix-Component-Instances">Appendix:
													Component Instances</a></li>
											<ul>
												<li><a href="#TimelineInterface">timeline</a></li>
												<li><a href="#TooltipInterface">tooltip</a></li>
												<li><a href="#LegendInterface">legend</a></li>
												<li><a href="#DataRangeInterface">dataRange</a></li>
												<li><a href="#DataZoomInterface">dataZoom</a></li>
												<li><a href="#GridInterface">grid</a></li>
												<li><a href="#AxisInterface">xAxis/yAxis</a></li>
												<li><a href="#CategoryAxisInterface">categoryAxis</a></li>
												<li><a href="#ValueAxisInterface">valueAxis</a></li>
												<li><a href="#PolarInterface">polar</a></li>
											</ul>
											<li><a href="#Appendix-Chart-Instances">Appendix:
													Chart Instances</a></li>
											<ul>
												<li><a href="#MapInterface">map</a></li>
											</ul>
										</ul>
										<li><a href="#Appendix-an-Intuitive-Example">Appendix:
												an Intuitive Example</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="accordion-toggle" data-toggle="collapse"
								data-parent="#accordion" href="#collapse-config">
								<strong>default options</strong>
							</div>
						</div>
						<div id="collapse-config" class="panel-collapse collapse">
							<div class="panel-body">
								<div id="config"></div>
							</div>
						</div>
					</div>
				</div>
				<!--/.well -->
			</div>
			<div class="col-md-9">
				<p style="margin: 20px 0 -30px 0">
					<a href="./start-en.html" target="_blank"
						style="margin-right: 50px;"> Getting started »</a> <a
						href="https://github.com/ecomfe/echarts/issues?page=1&state=open"
						target="_blank">Any feedback or question? »</a>
				</p>
				<div id="doc">
					<h3>
						Introduction<a name="Introduction"> </a>
					</h3>
					<p>
						ECharts (Enterprise Charts), written in pure JavaScript and based
						on <a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>
						(a whole new lightweight canvas library), is a comprehensive
						charting library offering an easy way of adding intuitive,
						interactive, and highly customizable charts to your commercial
						products. It works with all your web and mobile applications,
						including IE6/7/8/9/10/11, Chrome, Firefox, Safari and Opera. With
						original features like Drag-Recalculate, Data View and Scale
						Roaming, ECharts lets you mine and integrate data in ways you
						didn't think possible.
					</P>
					<p>ECharts currently supports 12 chart types, including line
						(area), column (bar), scatter (bubble), pie (doughnut), radar
						(filled radar), candlestick, chord, gauge, funnel, map, eventRiver
						and force-directed chart. Each and every chart is equipped with 7
						interactive components: title, tooltip, legend, scale, data area,
						timeline, and toolbox. Many of these components and charts can be
						combined in one chart.</P>
					<img src="asset/img/architecture.png" alt="Echarts Architecture" />
					<h3>
						Glossary<a name="Glossary"> </a>
					</h3>
					<p>General Terms</p>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Term</th>
							<th>Description</th>
						</tr>
						<tr>
							<td>chart</td>
							<td>A complete chart that may contain axes, legends, etc. It
								can either be a "basic" chart like line and pie, or a
								"combination" of those basic charts.</td>
						</tr>
						<tr>
							<td>axis</td>
							<td>A fixed reference line for the measurement of Cartesian
								coordinates. It can be divided into three types: category axis,
								value axis and time axis.</td>
						</tr>
						<tr>
							<td>xAxis</td>
							<td>The horizontal axis of a two-dimensional plot in
								Cartesian coordinates. It is category axis by convention and
								default.</td>
						</tr>
						<tr>
							<td>yAxis</td>
							<td>The vertical axis of a two-dimensional plot in Cartesian
								coordinates. It is value axis by convention and default.</td>
						</tr>
						<tr>
							<td>grid</td>
							<td>A network of regularly spaced lines on a Cartesian
								coordinate system that cross one another at right angles and are
								numbered to enable the precise location of a coordinate.</td>
						</tr>
						<tr>
							<td>legend</td>
							<td>The wording on a chart explaining the symbols used.</td>
						</tr>
						<tr>
							<td>dataRange</td>
							<td>Often used to select the scale of geographical data.</td>
						</tr>
						<tr>
							<td>dataZoom</td>
							<td>Often used to zoom in on a specific data area when the
								collection of data sets are large and complex.</td>
						</tr>
						<tr>
							<td>roamController</td>
							<td>Zoom and roam controller for the map.</td>
						</tr>
						<tr>
							<td>toolbox</td>
							<td>A set of functions accessible from a single menu, such
								as MarkLine, dataZoom, etc.</td>
						</tr>
						<tr>
							<td>tooltip</td>
							<td>A small "hover box" with detailed information about the
								item being hovered over.</td>
						</tr>
						<tr>
							<td>timeline</td>
							<td>Often used to display a list of data in chronological
								order.</td>
						</tr>
						<tr>
							<td>series</td>
							<td>Data series. A chart may contain multiple series, and
								each series may contain multiple data.</td>
						</tr>
					</table>
					<P>Charts Terms</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Term</th>
							<th>Description</th>
						</tr>
						<tr>
							<td>line</td>
							<td>Including line, stacked line, area, stacked area.</td>
						</tr>
						<tr>
							<td>bar</td>
							<td>Including colunm (vertical), stacked column, bar
								(horizontal), stacked bar.</td>
						</tr>
						<tr>
							<td>scatter</td>
							<td>Including scatter and bubble. In scatter, at least
								two-dimensional data are needed. When the third dimensional data
								joins the company, it can be mapped to color or size. When
								mapped to size, scatter turns into bubble.</td>
						</tr>
						<tr>
							<td>candlestick</td>
							<td>We call it 'k' for short. Used primarily to describe
								price movements of a security, derivative, or currency for a
								designated span of time.</td>
						</tr>
						<tr>
							<td>pie</td>
							<td>Including pie and doughnut. Supports two kinds of
								(radius, area) Nightingale’s rose diagram.</td>
						</tr>
						<tr>
							<td>radar</td>
							<td>Including radar and filled radar. A graphical method of
								displaying multivariate data.</td>
						</tr>
						<tr>
							<td>chord</td>
							<td>Commonly used to display relational data. The outer part
								is a doughnut, used to reflect the proportion of data; the inner
								part is the chords that connect each sectors, used to display
								relational data.</td>
						</tr>
						<tr>
							<td>force-directed chart</td>
							<td>Often used to display complex topology.</td>
						</tr>
						<tr>
							<td>map</td>
							<td>Including World Map, China Map, Map of China Provinces
								&amp; Cities, and extended maps on GeoJSON format. Supports SVG
								extension, such as body composition, football pitch, interior
								space, etc.</td>
						</tr>
						<tr>
							<td>gauge</td>
							<td>Often used to display the key index in a BI system.</td>
						</tr>
						<tr>
							<td>funnel</td>
							<td>Often used to display the data change in a data process,
								like filtered, combined etd, common in BI system.</td>
						</tr>
						<tr>
							<td>evnetRiver</td>
							<td>EventRiver is commonly used to display multiple events
								with time attribute, the evolution of events can be shown by
								time sequence.</td>
						</tr>
						<tr>
							<td>treemap</td>
							<td>Treemap is commonly used to display a tree structure.
								And treemaps are very effective when size is the most important
								feature to be displayed..</td>
						</tr>
						<tr>
							<td>venn</td>
							<td>Venn shows all possible logical relations between a
								finite collection of different sets.</td>
						</tr>
					</table>
					<h3>
						Chart Types<a name="Chart-Types"> </a>
					</h3>
					<P>The charting library includes basic single chart type and
						combination chart type.</P>
					<p>
						<img src="./asset/img/doc/charts.jpg" title="basic chart type"
							alt="basic chart type" />
					</P>

					<h4>
						single chart type: line<a name="Line"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>line</th>
							<th>stacked line</th>
							<th>area</th>
							<th>stacked area</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/line1.png" title=""
								alt="line" /></td>
							<td><img src="./asset/img/example/line2.png" title=""
								alt="stacked line" /></td>
							<td><img src="./asset/img/example/line3.png" title=""
								alt="area" /></td>
							<td><img src="./asset/img/example/line4.png" title=""
								alt="stacked area" /></td>
						</tr>
					</table>

					<h4>
						single chart type: bar (column)<a name="Bar"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>column</th>
							<th>stacked column</th>
							<th>bar</th>
							<th>stacked bar</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/bar1.png" title=""
								alt="column" /></td>
							<td><img src="./asset/img/example/bar2.png" title=""
								alt="stacked column" /></td>
							<td><img src="./asset/img/example/bar3.png" title=""
								alt="bar" /></td>
							<td><img src="./asset/img/example/bar4.png" title=""
								alt="stacked bar" /></td>
						</tr>
					</table>

					<h4>
						single chart type: scatter<a name="Scatter"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th colspan=2>scatter</th>
							<th>bubble</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/scatter1.png" title=""
								alt="scatter" /></td>
							<td><img src="./asset/img/example/dataRange1.png" title=""
								alt="scatter" /></td>
							<td><img src="./asset/img/example/scatter2.png" title=""
								alt="bubble" /></td>
						</tr>
					</table>

					<h4>
						single chart type: k (candlestick)<a name="Candlestick"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th colspan="2">candlestick</th>
						</tr>
						<tr>
							<td style="text-align: center"><img
								src="./asset/img/example/k1.png" title="" alt="candlestick" /></td>
							<td style="text-align: center"><img
								src="./asset/img/example/k.png" title="" alt="candlestick" /></td>
						</tr>
					</table>

					<h4>
						single chart type: pie<a name="Pie"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>pie</th>
							<th>doughnut</th>
							<th>Nightingale’s rose diagram</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/pie1.png" title=""
								alt="pie" /></td>
							<td><img src="./asset/img/example/pie2.png" title=""
								alt="doughnut" /></td>
							<td><img src="./asset/img/example/pie4.png" title=""
								alt="Nightingale’s rose diagram" /></td>
						</tr>
					</table>

					<h4>
						single chart type: radar<a name="Radar"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>radar</th>
							<th>filled radar</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/radar1.png" title=""
								alt="radar" /></td>
							<td><img src="./asset/img/example/radar2.png" title=""
								alt="filled radar" /></td>
						</tr>
					</table>

					<h4>
						single chart type: chord<a name="Chord"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th colspan="2">chord</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/chord1.png" title=""
								alt="chord" /></td>
							<td><img src="./asset/img/example/chord2.png" title=""
								alt="chord" /></td>
						</tr>
					</table>

					<h4>
						single chart type: force<a name="Force"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th colspan="3">force-directed chart</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/force1.png" title=""
								alt="force-directed chart" /></td>
							<td><img src="./asset/img/example/force2.png" title=""
								alt="force-directed chart" /></td>
							<td><img src="./asset/img/example/webkit-dep.png" title=""
								alt="force-directed chart" /></td>
						</tr>
					</table>

					<h4>
						single chart type: map<a name="Map"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>China Map</th>
							<th>Map of China Provinces &amp; Cities</th>
							<th>World Map</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/map1.png" title=""
								alt="China Map" /></td>
							<td><img src="./asset/img/example/map3.png" title=""
								alt=" Map of China Provinces &amp; Cities" /></td>
							<td><img src="./asset/img/example/map4.png" title=""
								alt="World Map" /></td>
						</tr>
						<tr>
							<th>Sub-Region Mode</th>
							<th>Standard GeoJson Extension</th>
							<th>SVG Extension</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/map8.png" title=""
								alt="Sub-Region Mode" /></td>
							<td><img src="./asset/img/example/map6.png" title=""
								alt="Standard GeoJson Extension" /></td>
							<td><img src="./asset/img/example/map16.png" title=""
								alt="SVG Extension" /></td>
						</tr>
					</table>

					<h4>
						single chart type: gauge<a name="Gauge"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th colspan=2>angular gauge</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/gauge4.png" title=""
								alt="angular gauge" /></td>
							<td><img src="./asset/img/example/gauge3.png" title=""
								alt="angular gauge" /></td>
						</tr>
					</table>

					<h4>
						single chart type: funnel<a name="Funnel"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th colspan=3>funnel</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/funnel1.png" title=""
								alt="funnel" /></td>
							<td><img src="./asset/img/example/funnel2.png" title=""
								alt="funnel" /></td>
							<td><img src="./asset/img/example/funnel3.png" title=""
								alt="funnel" /></td>
						</tr>
					</table>

					<h4>
						single chart type: eventRiver<a name="eventRiver"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th colspan=3>eventRiver</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/eventRiver1.png" title=""
								alt="eventRiver" /></td>
							<td><img src="./asset/img/example/eventRiver2.png" title=""
								alt="eventRiver" /></td>
						</tr>
					</table>

					<h4>
						single chart type：treemap<a name="treemap"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th colspan=2>Treemap</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/treemap.png" title=""
								alt="Treemap" /></td>
							<td><img src="./asset/img/example/treemap1.png" title=""
								alt="Treemap" /></td>
						</tr>
					</table>

					<h4>
						single chart type：tree<a name="treeChart"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th colspan=2>tree</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/tree1.png" title=""
								alt="tree" /></td>
							<td><img src="./asset/img/example/tree2.png" title=""
								alt="tree" /></td>
						</tr>
					</table>

					<h4>
						single chart type：venn<a name="venn"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full"
						style="width: 600px;">
						<tr>
							<th colspan=1>Venn</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/venn.png" title=""
								alt="Venn" /></td>
						</tr>
					</table>

					<h4>
						single chart type：wordCloud<a name="wordCloud"> </a>
					</h4>
					<table cellspacing="0" class="ADoc_table full"
						style="width: 600px;">
						<tr>
							<th colspan=1>Venn</th>
						</tr>
						<tr>
							<td><img src="./asset/img/example/wordCloud.png" title=""
								alt="Venn" /></td>
						</tr>
					</table>

					<h3>
						Import ECharts<a name="Import-ECharts"> </a>
					</h3>
					<p>We offer you various ways to import the ECharts library in
						your page, so that you can always choose the right one for your
						project.</p>

					<h3>
						modular package import <a name="Import-ECharts1"> </a>
					</h3>
					<P>
						If you are familiar with modular programming, and your project is
						modular and follows the AMD module specification, then it will be
						fairly easy to import echarts in your page; Import a module
						loader, like <a href="https://github.com/ecomfe/esl"
							target="_blank">esl.js</a>, and configure the packages path to
						point to src, and you will enjoy the chart’s maximum flexibility,
						such as load-on-demand. Since ECharts is based on ZRender, you
						also need to download <a href="https://github.com/ecomfe/zrender"
							target="_blank">ZRender</a> locally. Reference is made to <a
							href="example/demo.html#-en" target="_blank">demo</a>. Now you
						need to configure as follows.
					</p>
					<p>Please note: although package import maximizes flexibility
						in the development phase, it is not intended for going online
						directly. Reducing the number of documents requested is the most
						fundamental rule of front-end optimization, so please be sure to
						compress files when you go on line.</P>
					<div class="code">
						<pre>//from echarts example
require.config({
    packages: [
        {
            name: 'echarts',
            location: '../../src',
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender and echarts are in the same directory.
            main: 'zrender'
        }
    ]
});
</pre>
					</div>

					<h3>
						modular single file import (<b>preferred</b>) <a
							name="Import-ECharts2"> </a>
					</h3>
					<P>If you use modular programming, but do not have the
						packaging environment, or do not want to include a third party
						library source file to your project, then single file import seems
						to be a good choice. Like modular package import, you have to be
						familiar with modular programming.</P>
					<p>
						Begin with 2.1.8, we have created a powerful tool for echarts
						compression: <a href="https://github.com/ecomfe/echarts-optimizer"
							target="_blank">echarts-optimizer</a>. As you can see below, the
						build folder has included several single files of different
						combinations which are generated by <a
							href="https://github.com/ecomfe/echarts-optimizer"
							target="_blank">echarts-optimizer</a>, and you are free to choose
						one of them according to your needs:
					</p>
					<ul>
						<li>dist ( folder ) : compressed</li>
						<li>
							<ul>
								<li>echarts.js : The echarts core file which should be
									import by a &lt;script&gt tag, an AMD loader (<a
									href="https://github.com/ecomfe/esl" target="_blank">esl.js</a>)
									has been included in this file.
								</li>
								<li>chart ( folder ) : Via dependency analysis,
									echarts-optimizer generates a single file for every chart
									types, you can choose one of them according to your needs:
									<ul>
										<li>line.js : Line ( require echarts/chart/bar as the
											same time if Magic switch is needed )</li>
										<li>bar.js : Bar ( require echarts/chart/line as the same
											time if Magic switch is needed )</li>
										<li>scatter.js : Scatter</li>
										<li>k.js : Candlestick</li>
										<li>pie.js : Pie ( require echarts/chart/funnel as the
											same time if Magic switch is needed )</li>
										<li>radar.js : Radar</li>
										<li>map.js : Map</li>
										<li>force.js : Force-directed Chart ( require
											echarts/chart/chord as the same time if Magic switch is
											needed )</li>
										<li>chord.js : Chord ( require echarts/chart/force as the
											same time if Magic switch is needed )</li>
										<li>funnel.js : Funnel ( require echarts/chart/pie as the
											same time if Magic switch is needed )</li>
										<li>gauge.js : Gauge</li>
										<li>eventRiver.js : EventRiver</li>
									</ul>
								</li>
							</ul>
						</li>
						<li>source ( folder ) : uncompressed, same as dist which can
							be used to debug.</li>
					</ul>
					<p>
						See example in <a href="example/www/index.html" target="_blank">ECharts
							single file import</a>, stored in example/www. First you need to
						create a script tag src to echarts core ( echarts.js ).
					</p>
					<div class="code">
						<pre>//from echarts example
&lt;body&gt;
    &lt;div id="main" style="height:400px;"&gt;&lt;/div&gt;
    ...
    &lt;script src="./js/echarts.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</pre>
					</div>
					<p>You have get an AMD environment after echarts.js import,
						require.conifg as below:</p>
					<div class="code">
						<pre>//from echarts example
&lt;body&gt;
    &lt;div id="main" style="height:400px;"&gt;&lt;/div&gt;
    ...
    &lt;script src="./js/echarts.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        require.config({
            paths: {
                echarts: './js/dist'
            }
        });
    &lt;/script&gt;
&lt;/body&gt;
</pre>
					</div>
					<p>You can use ECharts by dynamic loading after the
						require.config.</p>
					<div class="code">
						<pre>//from echarts example
&lt;body&gt;
    &lt;div id="main" style="height:400px;"&gt;&lt;/div&gt;
    ...
    &lt;script src="./js/echarts.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        require.config({
            paths: {
                echarts: './js/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',   // load-on-demand, don't forget the Magic switch type.
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    ...
                }
                myChart.setOption(option);
            }
        );
    &lt;/script&gt;
&lt;/body&gt;
</pre>
					</div>
					<p>In a nutshell, it takes four steps to import ECharts in
						module single file.</p>
					<ol>
						<li>Prepare a Dom with size (width and height) for ECharts.
							(Of course it can be dynamically generated.)</li>
						<li>Create a script tag src to echarts core ( echarts.js ).</li>
						<li>Configure a ECharts path for the module loader, and link
							to echarts.js from the current page, see above.</li>
						<li>Dynamically load ECharts and use callback function to
							initialize it. (PS: if you want to use ECharts on a page where
							you've already loaded it, just require('echarts').init(dom).)</li>
					</ol>
					<p>
						see <a href="./start.html" target="_blank"
							style="margin-right: 50px;">Getting started »</a>
					</p>

					<h3>
						plain single file import <a name="Import-ECharts3"> </a>
					</h3>
					<P>
						The 1.3.5 release added support for plain import. If your project
						is not based on modularity, or it’s based on CMD specification
						(such as using sea.js), then it may not be appropriate for you to
						include the modular AMD-based ECharts. Therefore it is recommended
						that you use script plain import. Forget about require, you can
						directly use two global namespaces - ECharts, ZRender - after
						script plain import. Reference is made to <a
							href="example/www2/index.html" target="_blank">ECharts plain
							import</a>. Note that excanvas judges Canvas support by inserting the
						body tag into Canvas node, so if you put the script tag of ECharts
						into the head tag, IE8- browsers would give an error; the solution
						is to move the script tag into (behind) the body tag.
					</p>
					<p>
						In the plain import environment, you can import common modules
						directly through namespace, same as the modular path, such as: <br />echarts.config
						= require('echarts/config'), zrender.tool.color =
						require('zrender/tool/color').
					</p>
					<div class="code">
						<pre>//from echarts example
&lt;body&gt;
    &lt;div id="main" style="height:400px;"&gt;&lt;/div&gt;
    ...
    &lt;script src="example/www2/js/dist/echarts-all.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            ...
        }
        myChart.setOption(option);
    &lt;/script&gt;
&lt;/body&gt;
</pre>
					</div>
					<p>Single files that can be directly imported are listed below:</p>
					<ul>
						<li>dist/echarts-all.js : a compressed library of all the
							chart types, including World Map, China Map and Map of China
							Provinces &amp; Cities.</li>
						<li>source/echarts-all.js : an uncompressed library of all
							the chart types, including World Map, China Map and Map of China
							Provinces &amp; Cities. Available for debugging purposes.</li>
					</ul>
					<p>
						see <a href="./start.html" target="_blank"
							style="margin-right: 50px;">Getting started »</a>
					</p>

					<h3>
						Custom Build ECharts Single File <a
							name="Custom-Build-Echarts-Single-File"></a>
					</h3>
					<p>
						More detail about echarts-optimizer can be found at <a
							href="https://github.com/ecomfe/echarts-optimizer/blob/master/README.md"
							target="_blank">README.md</a>
					</p>

					<h3>
						Initialization <a name="Initialization"> </a>
					</h3>
					<p>After getting echarts interface through require (or in
						namespace), you can start to initialize chart. echarts interface
						has only one init method. When implementing init, pass in a dom
						node with size (width and height are not necessarily visible, as
						long as they can be calculated) and then you will get the
						instances of the chart object. The charting library has multiple
						instances, which means that you can init multiple charts at the
						same page on multiple doms, and if you init on the same dom
						repeatedly, the existing instance will be automatically disposed
						(1.4.0+ ). init method is illustrated as follows:</p>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Name</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{ECharts}</b> init</td>
							<td><b>{dom}</b> dom, <br />
							<b>{string | Object =}</b> theme</td>
							<td>Initialization interface, returns ECharts instances. Dom
								is the node for charts. Theme is optional. For built-in themes
								('macarons', 'infographic'), directly pass in name. For custom
								extended themes, pass in the theme object. Like this : <br />var
								myCharts = echarts.init(document.getElementById('main'),
								'macarons')；
							</td>
						</tr>
					</table>
					<p>
						For available methods of chart instances, see <a href="#Methods">Methods</a>.
					</p>
					<p>The initialization code after including ECharts is as
						follows:</p>
					<div class="code">
						<pre>
// As the entrance
require(
    [
        'echarts',
        'echarts/chart/pie'
    ],
    function (ec) {
        var myChart = ec.init(document.getElementById('main'));
        myChart.setOption({...});
    }
);

// -----------------------------

// For non-entrance or when using again, the chart has been loaded and registered
require('echarts').init(dom).setOption({...});

// If you need to use of ECharts later on, you'd better save the chart instances returned by init.
var myChart = require('echarts').init(dom);
myChart.setOption({...}); </pre>
					</div>
					<p>If you are familiar with modularity, you may skip the
						following code.</p>
					<div class="code">
						<pre>
// If you are strange to modularity, you can...
var echarts;
require(['echarts'], function (ec){
    echarts = ec;
});
// Yes, save echarts after loading it, and use it as namespace. </pre>
					</div>

					<h3>
						Instance Methods<a name="Instance-Methods"> </a>
					</h3>
					<p>Instance refers to the object returned by interface init (),
						such as "myChart" in the code above. All the non-get interfaces
						return themselves to support chained calls.</p>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Name</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{self}</b> setOption</td>
							<td><b>{Object}</b> option, <br />
							<b>{boolean=}</b> notMerge</td>
							<td>Universal interface, controls all the configuration
								options of chart instances (see <a href="#Option" title="">option</a>).
								When called multiple times, the option will be merged by
								default, which makes setOption easily become a universal method
								to update any attributes. For example, if you only want to
								change the title text, you only need to: <br />&nbsp;&nbsp;&nbsp;&nbsp;setOption({title
								: {text : 'new title'}}); <br />Of course, you can also stop the
								option from being merged with the last option by setting the
								notMerger parameter to true, when data or length changes between
								each setOption. <br />
							<br />Since 2.0.0, ECharts added support for timeline the
								component. When option includes timeline (see <a
								href="#Timeline" title="">timeline</a>), each individual option
								should be placed into an array named options, such as <pre>myCharts.setOption({
    timeline : {...},
    options : [
        {                // option1
            title : {...},
            series : [...]
        },
        {...},           // option2
        ...
    ]
});</pre>

							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> getOption</td>
							<td><b>{void}</b></td>
							<td>Returns the clone (copy) of the currently displayed
								option held internally.</td>
						</tr>
						<tr>
							<td><b>{self}</b> setSeries</td>
							<td><b>{Array}</b> series, <br />
							<b>{boolean=}</b> notMerge</td>
							<td>Data interface, the data array generated by data-driven
								chart. (see <a href="#Series" title="">series</a>), same result
								as calling setOption({series : {...}}, notMerge).
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> getSeries</td>
							<td><b>{void}</b></td>
							<td>Returns the clone (copy) of the currently displayed
								option held internally, same result as returning
								getOption().series.</td>
						</tr>
						<tr>
							<td><b>{self}</b> addData</td>
							<td>One set of data： <br />
							<b>{number}</b> seriesIdx <br />
							<b>{number | Object}</b> data <br />
							<b>{boolean=}</b> isHead <br />
							<b>{boolean=}</b> dataGrow <br />
							<b>{string=}</b> additionData <br />Add multiple sets of data: <br />
							<b>{Array}</b> params
							</td>
							<td>Dynamic data interface. <a
								href="example/dynamicLineBar.html#-en" target="_blank">Try
									this (Line &amp; Bar) »</a> <a
								href="example/dynamicScatterK.html#-en" target="_blank">Try
									this (Scatter &amp; Candlestick) »</a> <a
								href="example/dynamicPieRadar.html#-en" target="_blank">Try
									this (Pie &amp; Radar) »</a> <br />seriesIdx: series index <br />data:
								adds data <br />isHead: whether to insert at the head of the
								line. Defaults to unspecified. When unspecified or false, insert
								at the end of the line. <br />dataGrow: whether to increase the
								length of the data line. Defaults to unspecified. When
								unspecified or false, remove the data of the target array. <br />additionData:
								whether to add category axis (pie as the legend) data. Other
								operations are same as isHead and dataGrow. <br />When adding
								multiple sets of data, parameters are: <br />params ==
								[[seriesIdx, data, isHead, dataGrow, additionData], [...]]
							</td>
						</tr>
						<tr>
							<td><b>{self}</b> addMarkPoint</td>
							<td><b>{number}</b> seriesIdx <br />
							<b>{Object}</b> markData</td>
							<td>add markPoint interface, which includes <br />seriesIdx:
								series index <br />markData: [markLine] object, same as <a
								href="#SeriesMarkPoint" title="">series.markPoint</a>, supports
								multiple
							</td>
						</tr>
						<tr>
							<td><b>{self}</b> addMarkLine</td>
							<td><b>{number}</b> seriesIdx <br />
							<b>{Object}</b> markData</td>
							<td>add markPoint interface, which includes <br />seriesIdx:
								series index <br />markData: [markLine] object, same as <a
								href="#SeriesMarkLine" title="">series.markLine</a>, supports
								multiple
							</td>
						</tr>
						<tr>
							<td><b>{self}</b> delMarkPoint</td>
							<td><b>{number}</b> seriesIdx <br />
							<b>{string}</b> markName</td>
							<td>delete a single markPoint interface, which includes <br />seriesIdx:
								series index <br />markName: [markPoint] name
							</td>
						</tr>
						<tr>
							<td><b>{self}</b> delMarkLine</td>
							<td><b>{number}</b> seriesIdx <br />
							<b>{string}</b> markName</td>
							<td>delete a single markLine interface, which includes <br />seriesIdx:
								series index <br />markName: [markLine] name. The default
								makeLine name is the starting point's name in the makeLine's
								data. While the ending point is named too, like the map, both
								point's name would be joined as the default name like this
								"nameStart > nameEnd", such as <br />[{name:'Beijing',
								value:100}, {name:'Shanghai'}] <br />In this case, markName is
								"Beijing > notMerge"
							</td>
						</tr>
						<tr>
							<td><b>{self}</b> on</td>
							<td><b>{string}</b> eventName, <br />
							<b>{Function}</b> eventListener</td>
							<td>event bind, mount all the event naming on require
								('echarts/config'). EVENT (echarts.config.EVENT for non-modular)
								namespace. It is recommended that you use this namespace as the
								event name to include. Events supported by the current version
								are: <br />-----------------------Base
								Evetn----------------------- <br />REFRESH, <br />RESTORE, <br />RESIZE,
								<br />CLICK, <br />DBLCLICK, <br />HOVER, <br />MOUSEOUT, <br />-------------------Interactive
								Event-------------------- <br />DATA_CHANGED, <br />DATA_VIEW_CHANGED,
								<br />MAGIC_TYPE_CHANGED, <br />TIMELINE_CHANGED, <br />DATA_ZOOM,
								<br />DATA_RANGE, <br />DATA_RANGE_SELECTED, <br />DATA_RANGE_HOVERLINK,
								<br />LEGEND_SELECTED, <br />LEGEND_HOVERLINK, <br />MAP_ROAM, <br />MAP_SELECTED,
								<br />PIE_SELECTED, <br />FORCE_LAYOUT_END, <br />
							<a href="./example/event.html#-en" target="_blank">event
									debugging » </a>
							</td>
						</tr>
						<tr>
							<td><b>{self}</b> un</td>
							<td><b>{string}</b> eventName, <br />
							<b>{Function}</b> eventListener</td>
							<td>unbind event</td>
						</tr>
						<tr>
							<td><b>{self}</b> setTheme</td>
							<td><b>{string | Object}</b> theme</td>
							<td>Set the theme. For built-in themes ('macarons',
								'infographic'), pass in the name directly. For custom extended
								themes, pass in the theme object.</td>
						</tr>
						<tr>
							<td><b>{self}</b> connect</td>
							<td><b>{ECharts | Array &lt;ECharts&gt;}</b> connectTarget</td>
							<td>Chart Linkage, the linkage target passed in is ECharts
								instance, supports arrays. Supports tooltip linkage in Cartesian
								charts, automatic stitching of the saved images. The supported
								linkage events are: <br />REFRESH，RESTORE，MAGIC_TYPE_CHANGED <br />DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED
								<br />
							<a href="./example/mix8.html#-en" target="_blank">Chart
									Linkage »</a>
							</td>
						</tr>
						<tr>
							<td><b>{self}</b> disConnect</td>
							<td><b>{ECharts | Array &lt;ECharts&gt;}</b> connectTarget</td>
							<td>Disconnect chart linkage</td>
						</tr>
						<tr>
							<td><b>{self}</b> showLoading</td>
							<td><b>{Object}</b> loadingOption</td>
							<td>Option for the loading screen, (see <a
								href="#Loadingoption" title="">loadingOption</a>), show a
								loading label text. <a href="example/loading.html#-en"
								target="_blank">try this »</a></td>
						</tr>
						<tr>
							<td><b>{self}</b> hideLoading</td>
							<td><b>{void}</b></td>
							<td>Option for the loading screen, hide the loading screen.
							</td>
						</tr>
						<tr>
							<td><b>{ZRender}</b> getZrender</td>
							<td><b>{void}</b></td>
							<td>Get the ZRender instance used by the current chart,
								available for extra images addition or a high level of
								customization. For zrender interface, see <a
								href="http://ecomfe.github.io/zrender/doc/doc.html#zrenderInstance"
								target="_blank">ZRender</a>.
							</td>
						</tr>
						<tr>
							<td><b>{string}</b> getDataURL</td>
							<td><b>{string=}</b> imgType</td>
							<td>Get the current chart's Base64 image dataURL, not
								supported on IE8-, imgType: image type. Supports png|jpeg.
								Defaults to png.</td>
						</tr>
						<tr>
							<td><b>{Dom}</b> getImage</td>
							<td><b>{string=}</b> imgType</td>
							<td>Get the current chart's imag, imgType: image type.
								Supports png|jpeg. Defaults to png.</td>
						</tr>
						<tr>
							<td><b>{self}</b> resize</td>
							<td><b>{void}</b></td>
							<td>ECharts does not bind the resize event, and the internal
								system do not know whether the size of the display area changes
								or not. So you can bind the events you need, update the area by
								calling resize. Like window.onresize = myChart.resize.</td>
						</tr>
						<tr>
							<td><b>{self}</b> refresh</td>
							<td><b>{void}</b></td>
							<td>Refresh the chart. LEGEND_SELECTED, DATA_ZOOM and DRAG
								remain unchanged.</td>
						</tr>
						<tr>
							<td><b>{self}</b> restore</td>
							<td><b>{void}</b></td>
							<td>Restore the chart. All the states are cleared and
								restored to the original states.</td>
						</tr>
						<tr>
							<td><b>{self}</b> clear</td>
							<td><b>{void}</b></td>
							<td>Clear the drawing content. Instances are available after
								Clearing.</td>
						</tr>
						<tr>
							<td><b>{void}</b> dispose</td>
							<td><b>{void}</b></td>
							<td>Dispose the chart instances. Instances are unavailable
								after disposing.</td>
						</tr>
					</table>
					<h3>
						Options<a name="Options"> </a>
					</h3>

					<h4>
						option<a name="Option"> </a>
					</h4>
					<P>
						Chart options, including all the configuration options for ECharts
						demos: <span class='bgGreen'> general options </span>, <span
							class='bgRed'> component options </span>, <span class='bgBlue'>
							data options </span>
					</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Name</th>
							<th>Description</th>
						</tr>
						<tr class='bgGreen'>
							<td><b>{color}</b> backgroundColor</td>
							<td>The background color or gradient for the outer chart
								area, (see <a href="#BackgroundColor" title="">backgroundColor</a>).
								Support rgba and defaults to null, transprent.
							</td>
						</tr>
						<tr class='bgGreen'>
							<td><b>{Array}</b> color</td>
							<td>List of color for the array series, (see <a
								href="#Color" title="">color</a>), possible array is:
								['#87cefa', 'rgba(123,123,123,0.5)','...']. When there are more
								series than colors in the list, new colors are pulled from the
								start again.
							</td>
						</tr>
						<tr class='bgGreen'>
							<td><b>{boolean}</b> renderAsImage</td>
							<td>Allows rendering as image in any browser but IE8-, (see
								<a href="#RenderAsImage" title="">renderAsImage</a>).
							</td>
						</tr>
						<tr class='bgGreen'>
							<td><b>{boolean}</b> calculable</td>
							<td>Specifies whether the drag-recalculate feature will be
								enabled. Defaults to false. (See <a href="#calculable" title="">calculable</a>,
								and other related properties like <a href="#CalculableColor"
								title="">calculableColor</a>, <a href="#CalculableHolderColor"
								title="">calculableHolderColor</a>, <a href="#NameConnector"
								title="">nameConnector</a>, <a href="#ValueConnector" title="">valueConnector</a>).
							</td>
						</tr>
						<tr class='bgGreen'>
							<td><b>{boolean}</b> animation</td>
							<td>Specifies whether the animation will be enabled.
								Defaults to true. (See <a href="#Animation" title="">animation</a>,
								and other related properties like <a href="#AddDataAnimation"
								title="">addDataAnimation</a>, <a href="#AnimationThreshold"
								title="">animationThreshold</a>, <a href="#AnimationDuration"
								title="">animationDuration</a>, <a
								href="#animationDurationUpdate" title="">
									animationDurationUpdate </a> <a href="#AnimationEasing" title="">animationEasing</a>).
							</td>
						</tr>

						<tr class='bgRed'>
							<td><b>{Object}</b> timeline</td>
							<td>Timeline (see <a href="#Timeline" title="">timeline</a>),
								at most one timeline control is allowed in one chart.
							</td>
						</tr>
						<tr class='bgRed'>
							<td><b>{Object}</b> title</td>
							<td>Title, (see <a href="#Title" title="">title</a>), at
								most one title control is allowed in one chart.
							</td>
						</tr>
						<tr class='bgRed'>
							<td><b>{Object}</b> toolbox</td>
							<td>Toolbox, (see <a href="#Toolbox" title="">toolbox</a>),
								at most one toolbox is allowed in one chart.
							</td>
						</tr>
						<tr class='bgRed'>
							<td><b>{Object}</b> tooltip</td>
							<td>Tooltip, (see <a href="#Tooltip" title="">tooltip</a>),
								A small "hover box" with detailed information about the item
								being hovered over.
							</td>
						</tr>
						<tr class='bgRed'>
							<td><b>{Object}</b> legend</td>
							<td>Legend, (see <a href="#Legend" title="">legend</a>), at
								most one legend is allowed in one single/combination chart.
							</td>
						</tr>
						<tr class='bgRed'>
							<td><b>{Object}</b> dataRange</td>
							<td>DataRange, (see <a href="#DataRange" title="">dataRange</a>),
								data range.
							</td>
						</tr>
						<tr class='bgRed'>
							<td><b>{Object}</b> dataZoom</td>
							<td>DataZoom, (see <a href="#DataZoom" title="">dataZoom</a>),
								data zoom.
							</td>
						</tr>
						<tr class='bgRed'>
							<td><b>{Object}</b> roamController</td>
							<td>zoom and roam controller, (see <a href="#RoamController"
								title="">roamController</a>), use for the map.
							</td>
						</tr>
						<tr class='bgRed'>
							<td><b>{Object}</b> grid</td>
							<td>A network of regularly spaced lines on a Cartesian
								coordinate system, (see <a href="#Grid" title="">grid</a>).
							</td>
						</tr>
						<tr class='bgRed'>
							<td><b>{Array | Object}</b> xAxis</td>
							<td>The horizontal axis array of a two-dimensional plot in
								Cartesian coordinates, (see <a href="#Xaxis" title="">xAxis</a>),
								and each item in the array represents one horizontal axis.
								According to Standard (1.0), at most two horizontal axes are
								allowed in one chart.
							</td>
						</tr>
						<tr class='bgRed'>
							<td><b>{Array | Object}</b> yAxis</td>
							<td>The vertical axis array of a two-dimensional plot in
								Cartesian coordinates, (see <a href="#Yaxis" title="">yAxis</a>),
								and each item in the array represents one vertical axis.
								According to Standard (1.0), at most two vertical axes are
								allowed in one chart.
							</td>
						</tr>
						<tr class='bgBlue'>
							<td><b>{Array}</b> series</td>
							<td>The data array generated by data-driven chart, (see <a
								href="#Series" title="">series</a>). Each item in the array
								stands for a series' options and data.
							</td>
						</tr>
					</table>


					<h4>
						timeline<a name="Timeline"> </a>
					</h4>
					<P>
						timeline, at most one timeline control is allowed in one chart.
						Try <a href="./example/bar11.html#-en" target="_blank">bar »</a>,
						<a href="./example/scatter4.html#-en" target="_blank">scatter
							»</a>, <a href="./example/pie7.html#-en" target="_blank">pie »</a>, <a
							href="./example/map14.html#-en" target="_blank">map »</a>
					</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>true</td>
							<td>Specifies whether to show timeline. Valid values are:
								true (show) | false (hide).</td>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>4</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{string}</b> type</td>
							<td>'time'</td>
							<td>When the type is time, interval of the timeline is
								calculated based on the time span. Can also be: 'number'.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> notMerge</td>
							<td>false</td>
							<td>Whether to merge the options for timeline When called
								multiple times, same as the second parameter of setOption. (See
								<a href="#Instance Methods" title="">Instance Methods</a>).
							</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> realtime</td>
							<td>true</td>
							<td>Specifies whether the chart will be displayed in real
								time when you drag or click the timeline. Default to false (CAN
								NOT be changed) in the explorer which does't support canvas,
								such as IE6/7/8.</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> x</td>
							<td>80</td>
							<td>Set abscissa on the upper left corner of the timeline in
								px, or in percent (string) such as '50%' (horizontal center of
								the display area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> y</td>
							<td>null</td>
							<td>Set ordinate on the upper left corner of the timeline in
								px, or in percent (string). Defaults to null. The position
								varies with y2, such as '50%' (vertical center of the display
								area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> x2</td>
							<td>80</td>
							<td>Set abscissa on the lower right corner of the timeline
								in px, or in percent (string) such as '50%' (horizontal center
								of the display area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> y2</td>
							<td>0</td>
							<td>Set ordinate on the lower right corner of the timeline
								in px, or in percent (string) such as '50%' (vertical center of
								the display area).</td>
						</tr>
						<tr>
							<td><b>{number}</b> width</td>
							<td>adaptive</td>
							<td>Width of the timeline, defaults to the total width - x -
								x2, in px, ignore x2 after specifying width. See the image
								below. <br />Can also be set in percent (string), such as '50%'
								(half the width of the display area).
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> height</td>
							<td>50</td>
							<td>Height of the timeline, in px, or in percent (string)
								such as '50%' (half the height of the display area).</td>
						</tr>
						<tr>
							<td><b>{color}</b> backgroundColor</td>
							<td>'rgba(0,0,0,0)'</td>
							<td>The color of the background. Defaults to transparent.</td>
						</tr>
						<tr>
							<td><b>{number}</b> borderWidth</td>
							<td>0</td>
							<td>The width of the border.</td>
						</tr>
						<tr>
							<td><b>{color}</b> borderColor</td>
							<td>'#ccc'</td>
							<td>The color of the border.</td>
						</tr>
						<tr>
							<td><b>{number | Array}</b> padding</td>
							<td>5</td>
							<td>The inner padding, in px, defaults to 5. Can be set as
								array - [top, right, bottom, left], same as css, see image
								below.</td>
						</tr>
						<tr>
							<td><b>{string}</b> controlPosition</td>
							<td>'left'</td>
							<td>The position of play controller. Valid values are:
								'left' | 'right' | 'none'</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> autoPlay</td>
							<td>false</td>
							<td>Specifies whether to play automatically.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> loop</td>
							<td>true</td>
							<td>Specifies whether to play in a loop.</td>
						</tr>
						<tr>
							<td><b>{number}</b> playInterval</td>
							<td>2000</td>
							<td>Play time interval, in ms.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> lineStyle</td>
							<td><pre>{
    color: '#666',
    width: 1,
    type: 'dashed'
}                           </pre></td>
							<td>Sets the line style of the timeline, (see <a
								href="#LineStyle" title="">lineStyle</a>).
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> label</td>
							<td><pre>{
    show: true,
    interval: 'auto',
    rotate: 0,
    formatter: null,
    textStyle: {
        color: '#333'
    }
}                           </pre></td>
							<td>timeline label text<br /> <br />show: specifies whether
								to show. <br />interval: sets interval. Defaults to 'auto'.
								Valid values are: 'auto' (automatically hide those that cannot
								be displayed) | 0 (unhide all) | {number} <br />rotate: the
								angle of rotation, defaults to 0 (not rotate). Positive value
								for counterclockwise rotation, negative value for clockwise
								rotation. Valid values are: -90 ~ 90 <br />formatter: interval
								name formatter: {string} (Template) | {Function} <br />textStyle:
								text style, (see <a href="#TextStyle" title="">textStyle</a>).
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> checkpointStyle</td>
							<td><pre>{
    symbol : 'auto',
    symbolSize : 'auto',
    color : 'auto',
    borderColor : 'auto',
    borderWidth : 'auto',
    label: {
        show: false,
        textStyle: {
            color: 'auto'
        }
    }
}                           </pre></td>
							<td>timeline checkpoint<br /> <br />symbol: symbol of the
								checkpoint, defaults to the symbol on timeline. <br />symbolSize:
								size of the checkpoint symbol, defaults to the size of symbol on
								timeline. <br />color: color of the checkpoint symbol, defaults
								to the color of the checkpoint. A specific color can be
								specified; If unspecified, defaults to '#1e90ff'. <br />borderColor:
								the color of the checkpoint symbol border. <br />borderWidth:
								the width of the checkpoint symbol border. <br />label: see
								above.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> controlStyle</td>
							<td><pre>{
    itemSize: 15,
    itemGap: 5,
    normal : {
        color : '#333'
    },
    emphasis : {
        color : '#1e90ff'
    }
}                               </pre></td>
							<td>the style of timeline controller. ItemSize, itemGap and
								both normal and highlight color can be specified.</td>
						</tr>
						<tr>
							<td><b>{string}</b> symbol</td>
							<td>'emptyDiamond'</td>
							<td>the symbol for timeline tick, same as serie.symbol.</td>
						</tr>
						<tr>
							<td><b>{number}</b> symbolSize</td>
							<td>4</td>
							<td>size of the symbol for timeline tick, same as
								serie.symbolSize.</td>
						</tr>
						<tr>
							<td><b>{number}</b> currentIndex</td>
							<td>0</td>
							<td>The current index position, corresponding to options
								array, used to display a specific series.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> data</td>
							<td>[]</td>
							<td>timeline list, also the timeline label content.</td>
						</tr>
					</table>
					<p>
						<img src="./asset/img/doc/timeline.png" title="" alt="timeline" />
					</P>


					<h4>
						title<a name="Title"> </a>
					</h4>
					<P>title. In one chart, at most one title control is allowed,
						which can be devided into title and subtitle.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>true</td>
							<td>Specifies whether to show timeline. Valid values are:
								true (show) | false (hide).</td>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>6</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{string}</b> text</td>
							<td>''</td>
							<td>title text, '\n' represents a line feed.</td>
						</tr>
						<tr>
							<td><b>{string}</b> link</td>
							<td>''</td>
							<td>title text hyperlink.</td>
						</tr>
						<tr>
							<td><b>{string}</b> target</td>
							<td>null</td>
							<td>Specifies a window to open the title hyperlink. Can be
								one of 'self' | 'blank'. If unspecified, equal to 'blank' (a new
								window).</td>
						</tr>
						<tr>
							<td><b>{string}</b> subtext</td>
							<td>''</td>
							<td>subtitle text, '\n' represents a line feed.</td>
						</tr>
						<tr>
							<td><b>{string}</b> sublink</td>
							<td>''</td>
							<td>subtitle text hyperlink.</td>
						</tr>
						<tr>
							<td><b>{string}</b> subtarget</td>
							<td>null</td>
							<td>Specifies a window to open the subtitle hyperlink. Can
								be one of 'self' | 'blank'. If unspecified, equal to 'blank' (a
								new window).</td>
						</tr>
						<tr>
							<td><b>{string | number}</b> x</td>
							<td>'left'</td>
							<td>horizontal position. Defaults to left. Valid values are:
								'center' | 'left' | 'right' | <b>{number}</b>(x-coordinate, in
								px).
							</td>
						</tr>
						<tr>
							<td><b>{string | number}</b> y</td>
							<td>'top'</td>
							<td>vertical position. Defaults to top. Valid values are:
								'top' | 'bottom' | 'center' | <b>{number}</b>(y-coordinate, in
								px).
							</td>
						</tr>
						<tr>
							<td><b>{string}</b> textAlign</td>
							<td>null</td>
							<td>horizontal alignment. It is further determined by the x
								option by default. Valid values are: left' | 'right' | 'center.
							</td>
						</tr>

						<tr>
							<td><b>{color}</b> backgroundColor</td>
							<td>'rgba(0,0,0,0)'</td>
							<td>The color of the title's background. Defaults to
								transparent.</td>
						</tr>
						<tr>
							<td><b>{string}</b> borderColor</td>
							<td>'#ccc'</td>
							<td>The color of the drawn border around the title.</td>
						</tr>
						<tr>
							<td><b>{number}</b> borderWidth</td>
							<td>0</td>
							<td>The width of the drawn border around the title, in px,
								defaults to 0 (no border).</td>
						</tr>
						<tr>
							<td><b>{number | Array}</b> padding</td>
							<td>5</td>
							<td>The inner padding of the title, in px, defaults to 5.
								Can be set as array - [top, right, bottom, left], same as css,
								see image below.</td>
						</tr>
						<tr>
							<td><b>{number}</b> itemGap</td>
							<td>5</td>
							<td>The vertical gap between each item in the
								title/subtitle, in px, defaults to 10.</td>
						</tr>

						<tr>
							<td><b>{Object}</b> textStyle</td>
							<td><pre>{
    fontSize: 18,
    fontWeight: 'bolder',
    color: '#333'
}                           </pre></td>
							<td>the style of title text, (see <a href="#TextStyle"
								title="">textStyle</a>).
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> subtextStyle</td>
							<td><pre>{
    color: '#aaa'
}                           </pre></td>
							<td>the style of subtitle text, (see <a href="#TextStyle"
								title="">textStyle</a>).
							</td>
						</tr>

					</table>
					<p>
						<img src="./asset/img/doc/title.png" title="" alt="title" />
					</P>


					<h4>
						toolbox<a name="Toolbox"> </a>
					</h4>
					<P>
						Toolbox, at most one toolbox is allowed in one chart. <a
							href="example/toolbox.html#-en" target="_blank">Try this »</a>
					</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>false</td>
							<td>Specifies whether to show toolbox. Valid values are:
								true (show) | false (hide).</td>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>6</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{string}</b> orient</td>
							<td>'horizontal'</td>
							<td>layout manner. Defaults to horizontal. Valid values are:
								'horizontal' | 'vertical'.</td>
						</tr>
						<tr>
							<td><b>{string | number}</b> x</td>
							<td>'right'</td>
							<td>horizontal position. Defaults to center. Valid values
								are: 'center' | 'left' | 'right' | <b>{number}</b>(x-coordinate,
								in px).
							</td>
						</tr>
						<tr>
							<td><b>{string | number}</b> y</td>
							<td>'top'</td>
							<td>vertical position. Defaults to top. Valid values are:
								'top' | 'bottom' | 'center' | <b>{number}</b>(y-coordinate, in
								px).
							</td>
						</tr>
						<tr>
							<td><b>{color}</b> backgroundColor</td>
							<td>'rgba(0,0,0,0)'</td>
							<td>The color of the toolbox's background. Defaults to
								transparent.</td>
						</tr>
						<tr>
							<td><b>{color}</b> borderColor</td>
							<td>'#ccc'</td>
							<td>The color of the drawn border around the toolbox.</td>
						</tr>
						<tr>
							<td><b>{number}</b> borderWidth</td>
							<td>0</td>
							<td>The width of the drawn border around the toolbox, in px,
								defaults to 0 (no border).</td>
						</tr>
						<tr>
							<td><b>{number | Array}</b> padding</td>
							<td>5</td>
							<td>The inner padding of the toolbox, in px, defaults to 5.
								Can be set as array - [top, right, bottom, left], same as css,
								see image below.</td>
						</tr>
						<tr>
							<td><b>{number}</b> itemGap</td>
							<td>10</td>
							<td>The pixel gap between each item. Defaults to 10. It is
								horizontal in a toolbox with horizontal layout, and vertical in
								a toolbox with vertical layout. See image below.</td>
						</tr>
						<tr>
							<td><b>{number}</b> itemSize</td>
							<td>16</td>
							<td>the size of toolbox icon, in px.</td>
						</tr>
						<tr>
							<td><b>{Array &lt;color&gt;}</b> color</td>
							<td>['#1e90ff','#22bb22','#4b0082','#d2691e']</td>
							<td>An array containing the default colors for the toolbox's
								icons. When all colors are used, new colors are pulled from the
								start again. Default colors can also be set on specific
								features.</td>
						</tr>
						<tr>
							<td><b>{color}</b> disableColor</td>
							<td>'#ddd'</td>
							<td>Specifies the disable color.</td>
						</tr>
						<tr>
							<td><b>{color}</b> effectiveColor</td>
							<td>'red'</td>
							<td>Specifies the effective color.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> showTitle</td>
							<td>true</td>
							<td>Specifies whether the toolbox text will be showed.
								Defaults to true.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> textStyle</td>
							<td>{}</td>
							<td>the style of toolbox text, (See <a href="#TextStyle"
								title="">textStyle</a>).
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> feature</td>
							<td><pre>{
    mark : {
        show : false,
        title : {
            mark : '辅助线开关',
            markUndo : '删除辅助线',
            markClear : '清空辅助线'
        },
        lineStyle : {
            width : 2,
            color : '#1e90ff',
            type : 'dashed'
        }
    },
    dataZoom : {
        show : false,
        title : {
            dataZoom : '区域缩放',
            dataZoomReset : '区域缩放后退'
        }
    },
    dataView : {
        show : false,
        title : '数据视图',
        readOnly: false,
        lang: ['数据视图', '关闭', '刷新']
    },
    magicType: {
        show : false,
        title : {
            line : '折线图切换',
            bar : '柱形图切换',
            stack : '堆积',
            tiled : '平铺',
            force: '力导向布局图切换',
            chord: '和弦图切换',
            pie: '饼图切换',
            funnel: '漏斗图切换'
        },
        option: {
            // line: {...},
            // bar: {...},
            // stack: {...},
            // tiled: {...},
            // force: {...},
            // chord: {...},
            // pie: {...},
            // funnel: {...}
        },
        type : []
    },
    restore : {
        show : false,
        title : '还原'
    },
    saveAsImage : {
        show : false,
        title : '保存为图片',
        type : 'png',
        lang : ['点击保存']
    }
}
                              </pre></td>
							<td>Currently toolbox supports all the features listed
								below. For custom features, <a href="example/toolbox.html#-en"
								target="_blank"> try this »</a>
								<p>
									<img src="./asset/img/doc/toolbox.png" title="" alt="toolbox" />
								</P>
								<ul>
									<li>mark: markLine icons. In the picture above, the first,
										second, and third icons from the left respectively represent
										markLine switch, undo markLine, and clear markLine. You can
										set more properties.
										<ul>
											<li>lineStyle (see <a href="#LineStyle" title="">lineStyle</a>)
												can be passed in to set styles for markLine.
											</li>
										</ul>
									</li>
									<br />
									<li>dataZoom: dataZoom icons. Automatically synchronized
										with the dataZoom control. In the picture above, the fourth
										and fifth icons from the left respectively represent data zoom
										and data zoom reset.</li>
									<br />
									<li>dataView: dataView icon. In the picture above, the
										third icon from the right represents dataView, where You can
										set more properties.
										<ul>
											<li><b>{boolean=}</b> readOnly: dataView is set to
												read-only by default. It can be edited when readOnly is
												false.</li>
											<li><b>{Function=}</b> optionToContent: custom display
												content of dataView.</li>
											<li><b>{Function=}</b> contentToOption: When the
												readOnly of dataView is set to false, the refresh button
												will appear. You can set the content and the way to display
												it yourself if you want.</li>
											<li><b>{Array=}</b> lang: DataView has three default
												texts: ['Data View', 'close', 'refresh'], you can change it
												if you want.</li>
										</ul>
									</li>
									<br />
									<li>magicType: magicType icons. So far magicType supports
										switch between bar and line, stack and tile. In the picture
										above, the sixth, seventh, eighth and ninth icons from the
										left respectively represent switch to stack, tile, line, bar,
										force, chord, pie and funnel.
										<ul>
											<li><b>{Array}</b> type ['line', 'bar', 'stack',
												'tiled', 'force', 'chord', 'pie', 'funnel']</li>
											<li><b>{Object=}</b> option. Series' option can be
												dynamically changed at the time of magic switch.</li>
										</ul>
									</li>
									<br />
									<li>restore: restore icon. In the picture above, the
										second icon from the right represents restore the chart.</li>
									<br />
									<li>saveAsImage: saveAsImage icon. In the picture above,
										the first icon from the right represents save as image(not
										supported on IE8-), where You can set more properties.
										<ul>
											<li><b>{string=}</b> type: the default type to save
												image is 'png', change it to 'jpeg'.</li>
											<li><b>{string=}</b> name: specifies name of the image.
												If unspecified, use the chart title. If there is no title,
												defaults to “ECharts”.</li>
											<li><b>{string=}</b> lang: you can click to save it in
												non-IE browsers. Save text is supported. Defaults to “click
												Save”, can be changed.</li>
										</ul>
									</li>
								</ul>

							</td>
						</tr>
					</table>


					<h4>
						tooltip<a name="Tooltip"> </a>
					</h4>
					<P>
						Tooltip, a small "hover box" with detailed information about the
						item being hovered over. <a href="example/tooltip.html#-en"
							target="_blank">Try this »</a>
					</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>true</td>
							<td>Specifies whether to show tooltip. Valid values are:
								true (show) | false (hide).</td>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>1</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>8</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> showContent</td>
							<td>true</td>
							<td>Specifies whether to show the content of tooltip. Set it
								to false when you just need the tooltip to trigger events or
								show axisPointer. <br />. Valid values are: true (show) | false
								(hide).
							</td>
						</tr>
						<tr>
							<td><b>{string}</b> trigger</td>
							<td>'item'</td>
							<td>Type of trigger. Defaults to 'item'. See image below.
								Valid values are: 'item' | 'axis'.</td>
						</tr>
						<tr>
							<td><b>{Array | Function}</b> position</td>
							<td>null</td>
							<td>Specifies position, pass in <b>{Array}</b>, like [x, y],
								fixed position [x, y]; pass in <b>{Function}</b>, like
								function([x, y]) {return [newX,newY]}. The default displayed
								coordinates are input parameters, the new user-specified
								coordinates are output return values.
							</td>
						</tr>
						<tr>
							<td><b>{string | Function}</b> formatter</td>
							<td>null</td>
							<td>content formatter: <b>{string}</b> (Template) | <b>{Function}</b>.
								Supports asynchronous callback. See below.
							</td>
						</tr>
						<tr>
							<td><b>{string | Function}</b> islandFormatter</td>
							<td>'{a} &lt; br/&gt;{b} : {c}'</td>
							<td>island content formatter. For Drag-Recalculate only: <b>{string}</b>
								(Template) | <b>{Function}</b>. See below.
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> showDelay</td>
							<td>20</td>
							<td>The number of milliseconds to wait until the tooltip is
								shown when the mouse moves across a point or chart. Placing a
								delay on a tooltip before it is displayed can prevent frequent
								switch, especially when the tooltip text is requested
								asynchronously.</td>
						</tr>
						<tr>
							<td><b>{number}</b> hideDelay</td>
							<td>100</td>
							<td>The number of milliseconds to wait until the tooltip is
								hidden when mouse out from a point or chart.</td>
						</tr>
						<tr>
							<td><b>{number}</b> transitionDuration</td>
							<td>0.4</td>
							<td>The duration in seconds of the animated transition. If
								you want the tooltip to follow the mouse as it moves across a
								point or chart, setting showDelay to 0 is the key, but setting
								transitionDuration to 0 can also make a difference in
								interactive experiences.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> enterable</td>
							<td>false</td>
							<td>Specifies whether to let the mouse go into the tip dom,
								default to false. Let it be true if you need interaction like
								link | button etc.</td>
						</tr>
						<tr>
							<td><b>{color}</b> backgroundColor</td>
							<td>'rgba(0,0,0,0.7)'</td>
							<td>The background color for the tooltip. Defaults to a
								black color (opacity to 30%).</td>
						</tr>
						<tr>
							<td><b>{string}</b> borderColor</td>
							<td>'#333'</td>
							<td>The color of the tooltip border.</td>
						</tr>
						<tr>
							<td><b>{number}</b> borderRadius</td>
							<td>4</td>
							<td>The radius of the rounded border corners, in px,
								defaults to 4.</td>
						</tr>
						<tr>
							<td><b>{number}</b> borderWidth</td>
							<td>0</td>
							<td>The pixel width of the tooltip border, defaults to 0 (no
								border).</td>
						</tr>
						<tr>
							<td><b>{number | Array}</b> padding</td>
							<td>5</td>
							<td>The inner padding of the tooltip, in px, defaults to 5.
								Can be set as array - [top, right, bottom, left], same as css.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> axisPointer</td>
							<td><pre>{
    type: 'line',
    lineStyle: {
        color: '#48b',
        width: 2,
        type: 'solid'
    },
    crossStyle: {
        color: '#1e90ff',
        width: 1,
        type: 'dashed'
    },
    shadowStyle: {
        color: 'rgba(150,150,150,0.3)',
        width: 'auto',
        type: 'default'
    }
}                           </pre></td>
							<td>axis pointer, triggered by axis. Default type is line.
								Valid types are: 'line' | 'cross' | 'shadow' | 'none'. Each type
								has its corresponding style, see below. <br />lineStyle: style
								for line pointer, (see <a href="#LineStyle" title="">lineStyle</a>),
								<br />crossStyle: style for crosshairs pointer, (see <a
								href="#LineStyle" title="">lineStyle</a>), <br />shadowStyle:
								style for shadow pointer, (see <a href="#AreaStyle" title="">areaStyle</a>,
								areaStyle. Size is set to 'auto' by default. Width can be
								specified.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> textStyle</td>
							<td>{ color:'#fff' }</td>
							<td>style for the tooltip text. Defaults to white, (see <a
								href="#TextStyle" title="">textStyle</a>).
							</td>
						</tr>
					</table>
					<P>
						content formatter：<a href="example/tooltip.html#-en"
							target="_blank">Try this »</a>
					</P>
					<ul>
						<li><b>{string}</b>, Template, its variables are:
							<ul>
								<li>{a} | {a0}</li>
								<li>{b} | {b0}</li>
								<li>{c} | {c0}</li>
								<li>{d} | {d0} (some chart types do not have this variable)</li>
								<li>{e} | {e0} (some chart types do not have this variable)</li>
								<li>If there are multiple sets of data, there will be
									multiple sets of varaibles accordingly, like {a1}, {b1}, {c1},
									{d1}, {a2}, {b2}, {c2}, {d2}, ...</li>
								<li>Here are what variable a, b, c and d reprensent in
									different chart types:
									<ul>
										<li><b>line &amp; area</b>, <b>column &amp; bar, <b>candlestick</b></b>:
											a (series name), b(category value), c (value), d(null)</li>
										<li><b>scatter &amp; bubble</b>: a (series name), b (data
											name), c (value array), d(null)</li>
										<li><b>map</b>: a (series name), b (area name), c(merged
											value), d(null)</li>
										<li><b>pie</b>, <b>radar</b>, <b>gauge</b>, <b>funnel</b>:
											a (series name), b (data item name)，c(value), d (pie: percent
											| radar: indicator name)</li>
										<li><b>force, chord</b> :
											<ul>
												<li>node : a (series name)，b (node name)，c (node
													value), d (node index), e</li>
												<li>link : a (series name)，b (link name, default
													bigEndNodeName-smallEndNodeName)，c(link.value), d(name or
													index of big end node), e(name or index of small end node)</li>
											</ul></li>
									</ul>
								</li>
							</ul></li>
						<li><b>{Function}</b>, the list of parameters passed in is
							[params, ticket, callback], detail as follows:
							<ul>
								<li>&lt;Array&gt; params : array content and template
									varaibles are the same<pre>[
    {

        seriesIndex: 0,
        seriesName: 'Sales',
        name: 'Monday',
        dataIndex: 0,
        data: data,
        name: name,
        value: value,
        percent: special,       // pie
        indicator: special,     // radar, force, chord
        value2: special2,       // force, chord
        indicator2: special2    // force, chord
    },
    {..},
    ...
]
</pre>
								</li>
								<li>&lt;String&gt; ticket: asynchronous callback marker</li>
								<li>&lt;Function&gt; callback: asynchronous callback, the
									callback needs two parameters, the first one is the ticket that
									we mentioned earlier, the second is the fill content html.</li>
								<li><i>* When the function callbacks, 'this' pointer
										points to the current chart instance (myChart). </i></li>
							</ul></li>
					</ul>
					<P>trigger type:</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>item trigger</th>
							<th>axis trigger</th>
						</tr>
						<tr>
							<td style="text-align: center"><img
								src="./asset/img/doc/tooltip1.jpg" title="" alt="item trigger" /></td>
							<td style="text-align: center"><img
								src="./asset/img/doc/tooltip2.jpg" title="" alt="axis trigger" /></td>
						</tr>
					</table>


					<h4>
						legend<a name="Legend"> </a>
					</h4>
					<P>
						legend, at most one legend is allowed in one chart. <a
							href="example/legend.html#-en" target="_blank">Try this »</a>
					</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>true</td>
							<td>Specifies whether to show. Valid values are: true (show)
								| false (hide).</td>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>4</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{string}</b> orient</td>
							<td>'horizontal'</td>
							<td>layout manner, defaults to horizontal. Valid values are:
								'horizontal' | 'vertical'.</td>
						</tr>
						<tr>
							<td><b>{string | number}</b> x</td>
							<td>'center'</td>
							<td>horizontal position. Defaults to center. Valid values
								are: 'center' | 'left' | 'right' | <b>{number}</b>}(x-coordinate,
								in px).
							</td>
						</tr>
						<tr>
							<td><b>{string | number}</b> y</td>
							<td>'top'</td>
							<td>vertical position. Defaults to top. Valid values are:
								'top' | 'bottom' | 'center' | <b>{number}</b>(y-coordinate, in
								px).
							</td>
						</tr>
						<tr>
							<td><b>{color}</b> backgroundColor</td>
							<td>'rgba(0,0,0,0)'</td>
							<td>The color of the legend's background. Defaults to
								transparent.</td>
						</tr>
						<tr>
							<td><b>{string}</b> borderColor</td>
							<td>'#ccc'</td>
							<td>The color of the drawn border around the legend.</td>
						</tr>
						<tr>
							<td><b>{number}</b> borderWidth</td>
							<td>0</td>
							<td>The width of the drawn border around the legend, in px,
								defaults to 0 (no border).</td>
						</tr>
						<tr>
							<td><b>{number | Array}</b> padding</td>
							<td>5</td>
							<td>The inner padding of the legend, in px, defaults to 5.
								Can be set as array - [top, right, bottom, left], same as css,
								see image below.</td>
						</tr>
						<tr>
							<td><b>{number}</b> itemGap</td>
							<td>10</td>
							<td>The pixel gap between each item. Defaults to 10. It is
								horizontal in a legend with horizontal layout, and vertical in a
								legend with vertical layout. See image below.</td>
						</tr>
						<tr>
							<td><b>{number}</b> itemWidth</td>
							<td>20</td>
							<td>Legend shape's width.</td>
						</tr>
						<tr>
							<td><b>{number}</b> itemHeight</td>
							<td>14</td>
							<td>Legend shape's height.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> textStyle</td>
							<td>{color: '#333'}</td>
							<td>We only set the default color of legend text, (see <a
								href="#TextStyle" title="">textStyle</a>). If you want the
								legend text to take the color of the legend, you can set color
								to 'auto'.
							</td>
						</tr>
						<tr>
							<td><b>{string | Function}</b> formatter</td>
							<td>null</td>
							<td>text formatter: <b>{string}</b> (Template) | <b>{Function}</b>,
								template variable is '{name}', function paramater is name.
							</td>
						</tr>
						<tr>
							<td><b>{boolean | string}</b> selectedMode</td>
							<td>true</td>
							<td>selection mode. Enable legend switch by default. Can be
								one of: single, multiple</td>
						</tr>
						<tr>
							<td><b>{Object}</b> selected</td>
							<td>null</td>
							<td>The default selected state, can be used to conduct
								dynamic data loading with LEGEND.SELECTED event, <a
								href="example/legend.html#-en" target="_blank">try this »</a>
							</td>
						</tr>
						<tr>
							<td><b>{Array}</b> data</td>
							<td>[ ]</td>
							<td>legend content array, the array items are usually <b>{string}</b>,
								each item represents a series name, auto line break in layout,
								but you can specify a '' for a new line break. <br />Use the
								value to index the chart type and itemStyle used by series with
								the same name in <a href="#Series" title="">series</a>. If
								fails, the item will be in not enabled state by default. <br />If
								you need custom legend text style, you can change the array item
								to <b>{Object}</b>. With text style and custom icon, the format
								is: <br />{<br />&nbsp;&nbsp;name : <b>{string}</b>, <br />&nbsp;&nbsp;textStyle
								: <b>{Object}</b>, <br />&nbsp;&nbsp;icon : <b>{string}</b><br />}
							</td>
						</tr>
					</table>
					<p>
						<img src="./asset/img/doc/legend.png" title="" alt="legend" />
					</P>

					<h4>
						dataRange<a name="DataRange"> </a>
					</h4>
					<P>
						dataRange, at most one dataRange control is allowed in one chart.
						<a href="example/dataRange.html#-en" target="_blank">Try this
							»</a>
					</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>true</td>
							<td>Specifies whether to show. Valid values are: true (show)
								| false (hide).</td>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>4</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{string}</b> orient</td>
							<td>'vertical'</td>
							<td>layout manner. Defaults to vertical. Valid values are:
								'horizontal' | 'vertical'</td>
						</tr>
						<tr>
							<td><b>{string | number}</b> x</td>
							<td>'left'</td>
							<td>horizontal position. Defaults to left. Valid values are:
								'center' | 'left' | 'right' | <b>{number}</b>}(x-coordinate, in
								px).
							</td>
						</tr>
						<tr>
							<td><b>{string | number}</b> y</td>
							<td>'bottom'</td>
							<td>vertical position. Defaults to bottom. Valid values are:
								'top' | 'bottom' | 'center' | <b>{number}</b>(y-coordinate, in
								px).
							</td>
						</tr>
						<tr>
							<td><b>{color}</b> backgroundColor</td>
							<td>'rgba(0,0,0,0)'</td>
							<td>The color of the dataRange's background. Defaults to
								transparent.</td>
						</tr>
						<tr>
							<td><b>{string}</b> borderColor</td>
							<td>'#ccc'</td>
							<td>The color of the drawn border around the dataRange.</td>
						</tr>
						<tr>
							<td><b>{number}</b> borderWidth</td>
							<td>0</td>
							<td>The width of the drawn border around the dataRange, in
								px, defaults to 0 (no border).</td>
						</tr>
						<tr>
							<td><b>{number | Array}</b> padding</td>
							<td>5</td>
							<td>The inner padding of the dataRange, in px, defaults to
								5. Can be set as array - [top, right, bottom, left], same as
								css, see image below.</td>
						</tr>
						<tr>
							<td><b>{number}</b> itemGap</td>
							<td>10</td>
							<td>The pixel gap between each item. Defaults to 10. It is
								horizontal in the dataRange with horizontal layout, and vertical
								in the dataRange with vertical layout. See image below.</td>
						</tr>
						<tr>
							<td><b>{number}</b> itemWidth</td>
							<td>20</td>
							<td>The width of dataRange item.</td>
						</tr>
						<tr>
							<td><b>{number}</b> itemHeight</td>
							<td>14</td>
							<td>The width of dataRange item.</td>
						</tr>
						<tr>
							<td><b>{number}</b> min</td>
							<td>null</td>
							<td>The specified minimum value, such as 0. Defaults to
								null. Required parameter. Only when splitList is used, min can
								be ignored.</td>
						</tr>
						<tr>
							<td><b>{number}</b> max</td>
							<td>null</td>
							<td>The specified maximum value, such as 100. Defaults to
								null. Required parameter. Only when splitList is used, max can
								be ignored.</td>
						</tr>
						<tr>
							<td><b>{number}</b> precision</td>
							<td>0</td>
							<td>Decimal precision. Defaults to 0 (no decimal point). If
								the value of max - min is not divisible by splitNumber in the
								existing precision, the precision will be automatically
								increased for the sake of exact division. Inexact division is
								not supported.</td>
						</tr>
						<tr>
							<td><b>{number}</b> splitNumber</td>
							<td>5</td>
							<td>the number of segments. Defaults to 5. Linear gradient
								when set to 0. When calculable is true, it is equally split into
								100 parts by default.</td>
						</tr>
						<tr>
							<td><b>{Array.&lt;Object&gt;}</b> splitList</td>
							<td>null</td>
							<td>Customizing that how to split dataRange. When splitList
								is specified, splitNumber is ignored. <br /> splitList is an
								Array, which can not be empty. Each item of the Array is Object
								like: <br /> { <br /> &nbsp;&nbsp;start: 10 &nbsp;&nbsp;&nbsp;
								The start of the domain of this item. <br /> &nbsp;&nbsp;end:
								30 &nbsp;&nbsp;&nbsp; The end of the domain of this item. <br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'start' and 'end' can be
								set to the same value, <br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; in which case this item is
								coresponding to the single value rather than an interval. <br />
								&nbsp;&nbsp;label: '10 to 30' &nbsp;&nbsp;&nbsp; text label of
								this item. If ignoring this attribute, Text label will be auto
								generated. <br /> &nbsp;&nbsp;color: '#333' &nbsp;&nbsp;&nbsp;
								Color of this item. If ignoring attribute, color can be auto
								generated. <br /> } <br /> example: <a
								href="./example/dataRange2.html" target="_blank">this 》</a>
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> range</td>
							<td>null</td>
							<td>This option is used to set the initial selected range of
								dataRange. This option works when "calculable" is true. <br />
								The value of this option likes: {start: 10, end: 50}
							</td>
						</tr>
						<tr>
							<td><b>{boolean | string}</b> selectedMode</td>
							<td>true</td>
							<td>selection mode. Enable dataRange switch by default. Can
								be one of: single, multiple</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> calculable</td>
							<td>false</td>
							<td>Specifies whether the scale roaming feature will be
								enabled. When enabled, ignore splitNumber and splitList,
								dataRange shows as linear gradient.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> hoverLink</td>
							<td>true</td>
							<td>Hover link with the map.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> realtime</td>
							<td>true</td>
							<td>Specifies whether the scale roaming feature will be
								displayed in real time. Default to false (CAN NOT be changed) in
								the explorer which does't support canvas, such as IE6/7/8.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> color</td>
							<td>['#1e90ff','#f0ffff']</td>
							<td>color list of the dataRange. Length of the color array
								must be > = 2. The color shows the change from high value to low
								value; that is, the low color array represents the high value
								color. Alpha ( rgba ) is supported.</td>
						</tr>
						<tr>
							<td><b>{string | Function}</b> formatter</td>
							<td>null</td>
							<td>content formatter：<b>{string}</b> (Template) | <b>{Function}</b>,
								the template's variables are {value}' and '{value2}', which
								stand for start value ​​and end value. There are two function
								parameters, whose meanings are the same as template variables.
								One parameter '{value}' only when calculable is true. <a
								href="example/dataRange.html#-en" target="_blank">Try this »</a></td>
						</tr>
						<tr>
							<td><b>{Array}</b> text</td>
							<td>null</td>
							<td>text of the dataRange, when splitNumber is valid,
								defaults to the calculated value. You can specify a text array
								with the length of 2 to show the brief dataRange text, like
								['high', 'low']. '\n' represents a line feed.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> textStyle</td>
							<td>{color: '#333'}</td>
							<td>We only set the default color of dataRange text, (see<a
								href="#TextStyle" title="">textStyle</a>).
							</td>
						</tr>
					</table>
					<p>
						<img src="./asset/img/doc/dataRange.png" title="" alt="dataRange" />
					</P>

					<h4>
						dataZoom<a name="DataZoom"> </a>
					</h4>
					<P>
						dataZoom. Synchronized with toolbox.feature.dataZoom. Applicable
						to Cartesian chart only. <a href="example/dataZoom.html#-en"
							target="_blank">Try this »</a>
					</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>4</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>false</td>
							<td>Specifies whether to show dataZoom. If true, take over
								all the series of data using specified category axis. If
								unspecified, take over all the Cartesian coordinate system data.
							</td>
						</tr>
						<tr>
							<td><b>{string}</b> orient</td>
							<td>'horizontal'</td>
							<td>layout manner, defaults to horizontal. Valid values are:
								'horizontal' | 'vertical'.</td>
						</tr>
						<tr>
							<td><b>{number}</b> x</td>
							<td>adaptive</td>
							<td>Horizontal placement. By default it is adapted according
								to the grid's parameters. Vertical layout is left by default,
								can be specified. <b>{number}</b> (the x-coordinate, in pixels,
								of the upper-left corner.)
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> y</td>
							<td>adaptive</td>
							<td>Vertical placement. By default it is adapted according
								to the grid's parameters. Vertical layout is bottom by default,
								can be specified. <b>{number}</b> (the y-coordinate, in pixels,
								of the upper-left corner.)
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> width</td>
							<td>adaptive | 30</td>
							<td>Specifies width. In honrizontal layout, it is adapted
								according to the grid's parameters by default. In vertical
								layout, defaults to 30, can be specified. <b>{number}</b>
								(width, in px)
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> height</td>
							<td>adaptive | 30</td>
							<td>Specifies height. In vertical layout, it is adapted
								according to the grid's parameters by default. In honrizontal
								layout, defaults to 30, can be specified. <b>{number}</b>
								(height, in px)
							</td>
						</tr>
						<tr>
							<td><b>{color}</b> backgroundColor</td>
							<td>'rgba(0,0,0,0)'</td>
							<td>The color of the background. Defaults to transparent.</td>
						</tr>
						<tr>
							<td><b>{color}</b> dataBackgroundColor</td>
							<td>'#eee'</td>
							<td>The color of the dataZoom's background. Only the first
								series would be rendered as data background.</td>
						</tr>
						<tr>
							<td><b>{color}</b> fillerColor</td>
							<td>'rgba(144,197,237,0.2)'</td>
							<td>The fill color of the selected area.</td>
						</tr>
						<tr>
							<td><b>{color}</b> handleColor</td>
							<td>'rgba(70,130,180,0.8)'</td>
							<td>The color of the control handle.</td>
						</tr>
						<tr>
							<td><b>{number}</b> handleSize</td>
							<td>8</td>
							<td>The size of the control handle.</td>
						</tr>
						<tr>
							<td><b>{Array | number}</b> xAxisIndex</td>
							<td>null</td>
							<td>If unspecified, it controls by default all the x-axes.
								You can use array to specify multiple x-axes Index that needs to
								be controlled, and number to specify one x-axis Index that needs
								to be controlled.</td>
						</tr>
						<tr>
							<td><b>{Array | number}</b> yAxisIndex</td>
							<td>null</td>
							<td>If unspecified, it controls by default all the y-axes.
								You can use array to specify multiple y-axes Index that needs to
								be controlled, and number to specify one y-axis Index that needs
								to be controlled.</td>
						</tr>
						<tr>
							<td><b>{number}</b> start</td>
							<td>0</td>
							<td>The start percent of dataZoom. Defaults to 0 (%), starts
								with the first data.</td>
						</tr>
						<tr>
							<td><b>{number}</b> end</td>
							<td>100</td>
							<td>The end percent of dataZoom. Defaults to 100 (%), ends
								with the last data.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> showDetail</td>
							<td>true</td>
							<td>Show detail when dragging.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> realtime</td>
							<td>false</td>
							<td>Specifies whether dataZoom will be displayed in real
								time. It is suggested to disable the realtime effect when your
								browser is slow or data sets are large and complex. Default to
								false (CAN NOT be changed) in the explorer which does't support
								canvas, such as IE6/7/8.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> zoomLock</td>
							<td>false</td>
							<td>DataZoom lock. Defaults to false. When set to true, the
								selected area cannot be zoomed, i.e. (end - start) value remains
								unchanged; only data roaming is applicable.</td>
						</tr>
					</table>
					<p>
						<img src="./asset/img/doc/dataZoom.png" title="" alt="dataZoom" />
					</P>

					<h4>
						roamController<a name="RoamController"> </a>
					</h4>
					<P>
						Zoom and roam controller for the map. <a
							href="example/map1.html#-en" target="_blank">try this »</a>
					</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>true</td>
							<td>Specifies whether to show. Valid values are: true (show)
								| false (hide).</td>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>4</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{string | number}</b> x</td>
							<td>'left'</td>
							<td>horizontal position. Defaults to left. Valid values are:
								'center' | 'left' | 'right' | {number}(x-coordinate, in px).</td>
						</tr>
						<tr>
							<td><b>{string | number}</b> y</td>
							<td>'top'</td>
							<td>vertical position. Defaults to top. Valid values are:
								'top' | 'bottom' | 'center' | {number}(y-coordinate, in px).</td>
						</tr>
						<tr>
							<td><b>{number}</b> width</td>
							<td>80</td>
							<td>Specifies width which also define the size of the roam
								disk, can be <b>{number}</b>(in px)
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> height</td>
							<td>120</td>
							<td>Specifies height of the whold controller boundary box,
								the zoom button would be placed at the bottom, can be <b>{number}</b>(in
								px)
							</td>
						</tr>
						<tr>
							<td><b>{color}</b> backgroundColor</td>
							<td>'rgba(0,0,0,0)'</td>
							<td>The color of the background. Defaults to transparent.</td>
						</tr>
						<tr>
							<td><b>{string}</b> borderColor</td>
							<td>'#ccc'</td>
							<td>Color of the border.</td>
						</tr>
						<tr>
							<td><b>{number}</b> borderWidth</td>
							<td>0</td>
							<td>Width of the border.</td>
						</tr>
						<tr>
							<td><b>{number | Array}</b> padding</td>
							<td>5</td>
							<td>The inner padding, in px, defaults to 5. Can be set as
								array - [top, right, bottom, left], same as css, see image
								below.</td>
						</tr>
						<tr>
							<td><b>{color}</b> fillerColor</td>
							<td>'#fff'</td>
							<td>The fill color of the text in the controller.</td>
						</tr>
						<tr>
							<td><b>{color}</b> handleColor</td>
							<td>'#6495ed'</td>
							<td>The main color of the control handle.</td>
						</tr>
						<tr>
							<td><b>{number}</b> step</td>
							<td>15</td>
							<td>moving step of the 4 direction roam in px</td>
						</tr>
						<tr>
							<td><b>{Object}</b> mapTypeControl</td>
							<td>null</td>
							<td>Required. Specifies the mapType which should be under
								control, as: { china: true }<br />You can specify every single
								mapType when multiple map in a chart at the same time, such as:
								{ china: false, world: true}
							</td>
						</tr>
					</table>
					<p>
						<img src="./asset/img/doc/roamController.png" title=""
							alt="roamController" />
					</P>

					<h4>
						grid<a name="Grid"> </a>
					</h4>
					<P>A network of regularly spaced lines on a Cartesian
						coordinate system.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>0</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> x</td>
							<td>80</td>
							<td>Set abscissa on the upper left corner of the grid in px,
								or in percent (string) such as '50%' (horizontal center of the
								display area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> y</td>
							<td>60</td>
							<td>Set ordinate on the upper left corner of the grid in px,
								or in percent (string). Defaults to null. The position varies
								with y2, such as '50%' (vertical center of the display area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> x2</td>
							<td>80</td>
							<td>Set abscissa on the lower right corner of the grid in
								px, or in percent (string) such as '50%' (horizontal center of
								the display area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> y2</td>
							<td>60</td>
							<td>Set ordinate on the lower right corner of the grid in
								px, or in percent (string) such as '50%' (vertical center of the
								display area).</td>
						</tr>
						<tr>
							<td><b>{number}</b> width</td>
							<td>adaptive</td>
							<td>Width of the grid (without axes), defaults to the total
								width - x - x2, in px, ignore x2 after specifying width. See the
								image below. <br />Can also be set in percent (string), such as
								'50%' (half the width of the display area).
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> height</td>
							<td>adaptive</td>
							<td>Height of the grid (without axes), defaults to the total
								height - y - y2, in px, ignore y2 after specifying height. See
								the image below. <br />Can also be set in percent (string), such
								as '50%' (half the height of the display area).
							</td>
						</tr>
						<tr>
							<td><b>{color}</b> backgroundColor</td>
							<td>'rgba(0,0,0,0)'</td>
							<td>Background color, defaults to transparent.</td>
						</tr>
						<tr>
							<td><b>{number}</b> borderWidth</td>
							<td>1</td>
							<td>Width of the border.</td>
						</tr>
						<tr>
							<td><b>{color}</b> borderColor</td>
							<td>'#ccc'</td>
							<td>Color of the border.</td>
						</tr>
					</table>
					<p>
						<img src="./asset/img/doc/grid.jpg" title="" alt="grid" />
					</P>

					<h4>
						xAxis<a name="Xaxis"> </a>
					</h4>
					<P>
						The horizontal axis array in Cartesian coordinates. Each item in
						the array stands for a horizontal axis, and the array can be
						omitted if there is only one horizontal axis. In one chart, at
						most two horizontal axes are allowed. If there is only one x-axis,
						you can place it either at the bottom (by default) or at the top
						of the <a href="#Grid" title="">grid</a>. If there are two x-axes,
						they shall be placed in opposition to each other. By default, the
						first x-axis is placed at the bottom of the grid, and the second
						at the top.
					</p>
					<p>
						There are three types of coordinate axes: category axis, value
						axis and time axis (the differences are given in <a href="#Axis"
							title="">axis</a>). For most chart types x-axis is category axis,
						but for bar chart x-axis is value axis, and for scatter chart both
						x-axis and y-axis are value axes. For specific parameters, see <a
							href="#Axis" title="">axis</a>.
					</P>

					<h4>
						yAxis<a name="Yaxis"> </a>
					</h4>
					<P>
						The vertical axis array in Cartesian coordinates. Each item in the
						array stands for a vertical axis, and the array can be omitted if
						there is only one vertical axis. In one chart, at most two
						vertical axes are allowed. If there is only one y-axis, you can
						place it either on the left (by default) or on the right of the <a
							href="#Grid" title="">grid</a>. If there are two y-axes, they
						shall be placed in opposition to each other. By default, the first
						y-axis is placed on the left of the grid, and the second on the
						right.
					</p>
					<p>
						There are three types of coordinate axes: category axis, value
						axis and time axis (the differences are given in <a href="#Axis"
							title="">axis</a>). For most chart types y-axis is value axis,
						but for bar chart y-axis is category axis. For specific
						parameters, see <a href="#Axis" title="">axis</a>.
					</P>

					<h4>
						axis<a name="Axis"> </a><a name="CategoryAxis"> </a><a
							name="ValueAxis"> </a>
					</h4>
					<P>There are three types of coordinate axes: category axis,
						value axis and time axis. Their differences are:</P>
					<ul>
						<li>category axis: specifies the category list. The only axis
							that the data is organized by.</li>
						<li>value axis: specifies the valid values. The only axis
							where the values are placed.</li>
						<li>time axis: use the same as value axis. The only
							difference is time axis treat the data as time (date) and auto
							formate the value into different time granularity along with
							different time span.</li>
					</ul>
					<P>
						Here are the options for coordinate axes. Some options are
						applicable to category axis only, while others to value axis only.
						Please heed the type of application. <a
							href="example/axis.html#-en" target="_blank">Try this »</a>
					</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Type of application</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{string}</b> type</td>
							<td>'category' | 'value' | 'time' | 'log'</td>
							<td>universal</td>
							<td>type of the coordinate axis. By default, x-axis is
								'category', y-axis is 'value'.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>true</td>
							<td>universal</td>
							<td>Specifies whether to show axis. Valid values are: true
								(show) | false (hide).</td>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>universal</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>0</td>
							<td>universal</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{string}</b> position</td>
							<td>'bottom' | 'left'</td>
							<td>universal</td>
							<td>position of the coordinate axis. For x-axis
								('category'), defaults to 'bottom'. For y-axis ('value'),
								defaults to 'left'. Valid values are: 'bottom' | 'top' | 'left'
								| 'right'.</td>
						</tr>
						<tr>
							<td><b>{string}</b> name</td>
							<td>''</td>
							<td>value | time</td>
							<td>name of the value axis. Defaults to null.</td>
						</tr>
						<tr>
							<td><b>{string}</b> nameLocation</td>
							<td>'end'</td>
							<td>value | time</td>
							<td>name location of the value axis. Defaults to 'end'.
								Valid values are: 'start' | 'end'.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> nameTextStyle</td>
							<td>{}</td>
							<td>value | time</td>
							<td>text style for the name of the value axis. Defaults to
								global options, takes the main color of axisLine. Can be
								specified.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> boundaryGap</td>
							<td>true</td>
							<td>category</td>
							<td>blank border on each side of the cetegory axis. See
								image below. If true (by default), leaves it to blank; If false,
								extends to the edge of the grid.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> boundaryGap</td>
							<td>[0, 0]</td>
							<td>value | time</td>
							<td>blank border on each side of the axis. the value within
								the array represents percentage, [the difference between the
								original minimum value and the final minimum value, the
								difference between the original maximum value and the final
								maximum value].</td>
						</tr>
						<tr>
							<td><b>{number}</b> min</td>
							<td>null</td>
							<td>value | time</td>
							<td>The pecified minimum value, such as 0. Defaults to null.
								Further determined by specific values. Ignores boundaryGap[0]
								when specified.</td>
						</tr>
						<tr>
							<td><b>{number}</b> max</td>
							<td>null</td>
							<td>value | time</td>
							<td>The pecified maximum value, such as 100. Defaults to
								null. Further determined by specific values. Ignores
								boundaryGap[1] when specified.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> scale</td>
							<td>false</td>
							<td>value | time</td>
							<td>If false, the value axis must start with 0. If true, you
								can set the minimum and maximum value of value axis as the
								starting and ending value of your value axis.</td>
						</tr>
						<tr>
							<td><b>{number}</b> splitNumber</td>
							<td>null</td>
							<td>value | time</td>
							<td>Number of segments, defaults to auto split along with
								the min/max.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> logPositive</td>
							<td>null</td>
							<td>value</td>
							<td>This option works when axis.type === 'log'. If set to
								false, negative value is supported. It is self-adapting by
								default, which means that if all of the data is negative,
								logPositive will be set to false, otherwise true.</td>
						</tr>
						<tr>
							<td><b>{number}</b> logLabelBase</td>
							<td>null</td>
							<td>value</td>
							<td>This option works when axis.type === 'log'. If
								specified, axisLabel is drawn as exponent style. For example,
								when logLabelBase = 4, axisLabel is drawn like 4², 4³. If not
								specified, axisLabel is drawn like 1,000,000 as usual.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> axisLine</td>
							<td>varying</td>
							<td>universal</td>
							<td>Axis line. Default to show. See below.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> axisTick</td>
							<td>varying</td>
							<td>universal</td>
							<td>Axis tick. Defaults to hide. See below.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> axisLabel</td>
							<td>varying</td>
							<td>universal</td>
							<td>Axis text label. See below.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> splitLine</td>
							<td>varying</td>
							<td>universal</td>
							<td>Split line. Defaults to show. See below.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> splitArea</td>
							<td>varying</td>
							<td>universal</td>
							<td>Split area. Defaults to hide. See below.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> data</td>
							<td>[]</td>
							<td>category axis</td>
							<td>Category list, also label content, see <a
								href="#AxisData" title="">axis.data</a>.
							</td>
						</tr>
					</table>
					<P>boundaryGap</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Configuration</th>
							<td>boundaryGap: true</td>
							<td>boundaryGap: false</td>
						</tr>
						<tr>
							<th>Effects</th>
							<td><img src="./asset/img/doc/axisBoundaryGap1.jpg" title=""
								alt="axisBoundaryGap1" /></td>
							<td><img src="./asset/img/doc/axisBoundaryGap.png" title=""
								alt="axisBoundaryGap" /></td>
						</tr>
					</table>
					<P>scale strategy</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Configuration</th>
							<td>scale: false</td>
							<td>scale: true</td>
						</tr>
						<tr>
							<th>Effects</th>
							<td><img src="./asset/img/doc/axisScale1.png" title=""
								alt="axisScale1" /></td>
							<td><img src="./asset/img/doc/axisScale2.png" title=""
								alt="axisScale2" /></td>
						</tr>
					</table>
					<P>description of axis properties</P>
					<p>
						<img src="./asset/img/doc/axisDetail.png" title=""
							alt="axisDetail" />
					</P>

					<h5>
						axis.axisLine<a name="AxisAxisline"> </a>
					</h5>
					<P>axis line. Defaults to show. Default styles are listed
						below.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Type of application</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>true</td>
							<td>both</td>
							<td>Specifies whether to show axisLine. Defaults to true,
								which is a prerequisite for the following properties.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> onZero</td>
							<td>true</td>
							<td>both</td>
							<td>Locates to the coordinates whose vertical axis value is
								0.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> lineStyle</td>
							<td><pre>{
    color: '#48b',
    width: 2,
    type: 'solid'
}                           </pre></td>
							<td>both</td>
							<td>controls the line style, (see <a href="#LineStyle"
								title="">lineStyle</a>).
							</td>
						</tr>
					</table>

					<h5>
						axis.axisTick<a name="AxisAxistick"> </a>
					</h5>
					<P>axis tick. For value axis, defaults to hide. For category
						axis, defaults to show. Default styles are listed below.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Type of application</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>false (value | time)<br /> true (category axis)
							</td>
							<td>universal</td>
							<td>Specifies whether to show axisTick. Defaults to false.
								The following properties will be set by default values When it
								is true.</td>
						</tr>
						<tr>
							<td><b>{string | number | function}</b> interval</td>
							<td>'auto'</td>
							<td>category axis</td>
							<td>specifies the interval between axisTicks. Defaults to
								'auto'. Valid values are: <br />'auto' (automatically hide those
								that cannot be displayed) | 0 (unhide all) | <br />
							<b>{number}</b>(specified by the user). <br />
							<b>{function}</b>callback, paramater is [index，data[index]],
								return true to show and false to hide
							</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> onGap</td>
							<td>null</td>
							<td>category axis</td>
							<td>Specifies whether the axisTick will be positioned at
								regular intervals. Defaults to boundaryGap.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> inside</td>
							<td>false</td>
							<td>universal</td>
							<td>Specifies whether the axisTick will be displayed inside
								the grid. Defaults to outside.</td>
						</tr>
						<tr>
							<td><b>{number}</b> length</td>
							<td>5</td>
							<td>universal</td>
							<td>controls the length of the line.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> lineStyle</td>
							<td><pre>{
    color: '#333',
    width: 1
}                           </pres></td>
							<td>both</td>
							<td>controls the line style, (see<a href="#LineStyle"
								title="">lineStyle</a>).
							</td>
						</tr>
					</table>

					<h5>
						axis.axisLabel<a name="AxisAxislabel"> </a>
					</h5>
					<P>options for axis label</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Type of application</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>true</td>
							<td>universal</td>
							<td>Specifies whether to show axisLabel. Defaults to true,
								which is a prerequisite for the following properties.</td>
						</tr>
						<tr>
							<td><b>{string | number | function}</b> interval</td>
							<td>'auto'</td>
							<td>category axis</td>
							<td>specifies the interval between axisLabels. Defaults to
								'auto'. Valid values are: <br />'auto' (automatically hide those
								that cannot be displayed) | 0 (unhide all) | <br />
							<b>{number}</b>(specified by the user). <br />
							<b>{function}</b>callback, paramater is [index，data[index]],
								return true to show and false to hide
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> rotate</td>
							<td>0</td>
							<td>universal</td>
							<td>The angle of rotation, defaults to 0 (not rotate).
								Positive value for counterclockwise rotation, negative value for
								clockwise rotation. Valid values are: -90 ~ 90.</td>
						</tr>
						<tr>
							<td><b>{number}</b> margin</td>
							<td>8</td>
							<td>universal</td>
							<td>The pixel distance between the axisLabel and the
								axis.Defaults to 8.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> clickable</td>
							<td>false</td>
							<td>universal</td>
							<td>Specifies whether the axisLabel is clickable.</td>
						</tr>
						<tr>
							<td><b>{string | Function}</b> formatter</td>
							<td>null</td>
							<td>universal</td>
							<td>split name formatter: <b>{string}</b> (Template) | <b>{Function}</b>
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> textStyle</td>
							<td><pre>{
    color: '#333'
}                           </pre></td>
							<td>universal</td>
							<td>text style (see <a href="#TextStyle" title="">textStyle</a>).
								If the axis is value or time axis, color accepts method callback
								to achieve custom color definition, support <a
								href="https://github.com/ecomfe/echarts/issues/226"
								target="_blank">#226 »</a>
							</td>
						</tr>
					</table>
					<P>split name formatter:</P>
					<ul>
						<li><b>{string}</b>, Template, its variables are:
							<ul>
								<li>{value}: content or value</li>
							</ul></li>

						<li><b>{Function}</b>, pass in parameters and template
							varaibles:
							<ul>
								<li>eg：function (value) {return ['Sunday', 'Monday',
									'Tuesday', 'Wednesday', 'Thursday', 'Friday',
									'Saturday'][value]; }</li>
							</ul></li>
					</ul>

					<h5>
						axis.splitLine<a name="AxisSplitline"> </a>
					</h5>
					<P>split line. Defaults to show. Default styles are listed
						below.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Type of application</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>true</td>
							<td>universal</td>
							<td>Specifies whether to show splitLine. Defaults to true,
								which is a prerequisite for the following properties.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> onGap</td>
							<td>null</td>
							<td>category axis</td>
							<td>Specifies whether the splitLine will be positioned at
								regular intervals. Equal to boundaryGap by default.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> lineStyle</td>
							<td><pre>{
    color: ['#ccc'],
    width: 1,
    type: 'solid'
}                           </pre></td>
							<td>universal</td>
							<td>controls the line style ,(see <a href="#LineStyle"
								title="">lineStyle</a>).
							</td>
						</tr>
					</table>

					<h5>
						axis.splitArea<a name="AxisSplitarea"> </a>
					</h5>
					<P>split area, defaults to hide:</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Type of application</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> show</td>
							<td>false</td>
							<td>universal</td>
							<td>Specifies whether to show splitArea. Defaults to false.
								The following properties will be set by default values When it
								is true.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> onGap</td>
							<td>null</td>
							<td>category axis</td>
							<td>Specifies whether the splitArea will be positioned at
								regular intervals. Defaults to boundaryGap.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> areaStyle</td>
							<td><pre>{
    color: [
        'rgba(250,250,250,0.3)',
        'rgba(200,200,200,0.3)'
    ]
}                           </pre></td>
							<td>universal</td>
							<td>the property "areaStyle" (see <a href="#AreaStyle"
								title="">areaStyle</a>), controls area style, the color array
								will be changed at intervals.
							</td>
						</tr>
					</table>

					<h5>
						axis.data<a name="AxisData"> </a>
					</h5>
					<P>the array of category axis text label, specifies label
						content. The array items are usually tex. '\n' represents a line
						feed, for example:</P>
					<div class="code">
						<pre>[&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, ..., &#39;Dec&#39;]
</pre>
					</div>
					<P>When you need to customize individual labels, the array can
						use objects to accept textStyle to set custom labels, such as:</P>
					<div class="code">
						<pre>[
    &#39;Jav&#39;, &#39;Feb&#39;, &#39;Mar&#39;,
     {
        value:&#39;Apr&#39;,        //Text content, if the split name formatter is specified, this value will be passed in as a template variable value ​​or parameter.
        textStyle:{                 //see textStyle
            color : &#39;red&#39;
            ...
        }
     },
    &#39;May&#39;, &#39;...&#39;
]
</pre>
					</div>

					<h4>
						polar<a name="Polar"> </a>
					</h4>
					<P>polar coordinates:</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>0</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> center</td>
							<td>['50%', '50%']</td>
							<td>coordinate of the center, in pixels or percent. The
								formula for calculating percent: min(width, height) * 50%.</td>
						</tr>
						<tr>
							<td><b>{number}</b> radius</td>
							<td>'75%'</td>
							<td>radius, in pixels or in percent. The formula for
								calculating percent: min(width, height) / 2 * 75%.</td>
						</tr>
						<tr>
							<td><b>{number}</b> startAngle</td>
							<td>90</td>
							<td>The start angle. Valid range is: [-180,180]</td>
						</tr>
						<tr>
							<td><b>{number}</b> splitNumber</td>
							<td>5</td>
							<td>the number of segments, defaults to 5</td>
						</tr>
						<tr>
							<td><b>{Object}</b> name</td>
							<td><pre>{
    show: true,
    formatter: null,
    textStyle: {
        color:#333
    }
}                           </pre></td>
							<td>name of coordinate axis.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> boundaryGap</td>
							<td>[0, 0]</td>
							<td>blank border on each side of the value axis. the value
								within the array represents percentage, [the difference between
								the original minimum value and the final minimum value, the
								difference between the original maximum value and the final
								maximum value].</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> scale</td>
							<td>false</td>
							<td>If false, the value axis must start with 0. If true, you
								can set the minimum and maximum value of value axis as the
								starting and ending value of your value axis.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> axisLine</td>
							<td>{show : true}</td>
							<td>axis line. Defaults to show. The property "show"
								specifies whether to show axisLine or not. The property
								"lineStyle" (see <a href="#LineStyle" title="">lineStyle</a>)
								controls line style for axisLine.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> axisLabel</td>
							<td>{show : false}</td>
							<td>axis label, see <a href="#AxisAxislabel" title="">axis.axisLabel</a>.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> splitLine</td>
							<td>{show : true}</td>
							<td>split line. Defaults to show. The property "show"
								specifies whether to show splitLine or not. The property
								"lineStyle" (see <a href="#LineStyle" title="">lineStyle</a>)
								controls line style for splitLine.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> splitArea</td>
							<td>{show : true}</td>
							<td>split area. Defaults to hide. The property "show"
								specifies whether to show splitArea or not. The property
								"areaStyle" (see <a href="#AreaStyle" title="">areaStyle</a>)
								controls area style for splitArea.
							</td>
						</tr>
						<tr>
							<td><b>{String}</b> type</td>
							<td>'polygon'</td>
							<td>The shape of polar coordinates. Valid values are:
								'polygon'|'circle'.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> indicator</td>
							<td>[]</td>
							<td>radar indicator list, also label content, see the
								example below.</td>
						</tr>
					</table>
					<div class="code">
						<pre>
indicator : [
    {text : 'appearance'},
    {text : 'photograph', min : 0},
    {text : 'system', min : 0, max : 100},
    {text : 'performance', axisLabel: {...}},
    {text : 'screen'}
]
</pre>
					</div>

					<h4>
						series (universal)<a name="Series"> </a>
					</h4>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data. Some
						options are applicable to specific chart types only. Please note
						the type of application.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Type of application</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{number}</b> zlevel</td>
							<td>0</td>
							<td>universal</td>
							<td>The first grade cascading control. Every zlevel will be
								allocated to a independent canvas, charts and components with
								the same zlevel will be rendered in the same canvas. The higher
								zlevel the closer to the top. More canvas dom will need more
								memory and performance, so never set too many zlevel. Most of
								the time, the second grade cascading control 'z' is recommended.</td>
						</tr>
						<tr>
							<td><b>{number}</b> z</td>
							<td>2</td>
							<td>universal</td>
							<td>The second grade cascading control, In the same canvas
								(zlevel), the higher z the closer to the top.</td>
						</tr>
						<tr>
							<td><b>{string}</b> type</td>
							<td>null</td>
							<td>universal</td>
							<td>chart type. Required parameter. If null or unsupported
								type, the data of this series will not be shown. Valid values
								are: <br />'line' | 'bar' | 'scatter' | 'candlestick' <br />
								'pie' | 'radar' | 'chord' | 'force' | 'map'
							</td>
						</tr>
						<tr>
							<td><b>{string}</b> name</td>
							<td>null</td>
							<td>universal</td>
							<td>name of series. if the legend is enabled, the value will
								be indexed to legend.data.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> tooltip</td>
							<td>null</td>
							<td>universal</td>
							<td>style of the tooltip. Applicable to this series only. If
								unspecified, use option.tooltip (See <a href="#Tooltip" title="">tooltip</a>),
								a small "hover box" with detailed information about the item
								being hovered over.
							</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> clickable</td>
							<td>true</td>
							<td>universal</td>
							<td>Specifies data graphic clickable or not, default to
								true, recommend to false when you do not have a click event
								handler.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> itemStyle</td>
							<td>null</td>
							<td>universal</td>
							<td>item style, (see <a href="#ItemStyle" title="">itemStyle</a>).
							</td>
						</tr>
						<tr>
							<td><b>{Array}</b> data</td>
							<td>[]</td>
							<td>universal</td>
							<td>data, (see<a href="#SeriesData" title="">series.data</a>).
							</td>
						</tr>
						<tr>
							<td><b>{Array}</b> markPoint</td>
							<td>{}</td>
							<td>universal</td>
							<td>markPoint, (see<a href="#SeriesMarkPoint" title="">series.markPoint</a>).
							</td>
						</tr>
						<tr>
							<td><b>{Array}</b> markLine</td>
							<td>{}</td>
							<td>universal</td>
							<td>markLine, (see<a href="#SeriesMarkLine" title="">series.markLine</a>).
							</td>
						</tr>
					</table>

					<h5>
						series (Cartesian) <a name="SeriesCartesian"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data. Some
						options are applicable to specific chart types only. Please note
						the type of application.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Type of application</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{string}</b> stack</td>
							<td>null</td>
							<td>line, column</td>
							<td>name of the stack, USELESS in irregular line|bar. It is
								used in stacked charts with multiple groups of data. For
								example, stack:'group1' means to stack the values of the data
								whose stack value is 'group1' in the series array.</td>
						</tr>
						<tr>
							<td><b>{number}</b> xAxisIndex</td>
							<td>0</td>
							<td>line, column, scatter, candlestick</td>
							<td><a href="#Xaxis" title="">xAxis</a> the index of the
								axis array. Specifies the horizontal axis that the data series
								uses.</td>
						</tr>
						<tr>
							<td><b>{number}</b> yAxisIndex</td>
							<td>0</td>
							<td>line, column, scatter, candlestick</td>
							<td><a href="#Yaxis" title="">yAxis</a> the index of the
								axis array. Specifies the vertical axis that the data series
								uses.</td>
						</tr>
						<tr>
							<td><b>{number | string} </b>barGap</td>
							<td>'30%'</td>
							<td>column</td>
							<td>the distance between each bar. Defaults to barWidth *
								30%. Can also set to be a fixed value.</td>
						</tr>
						<tr>
							<td><b>{number | string} </b>barCategoryGap</td>
							<td>'20%'</td>
							<td>column</td>
							<td>the distance between each bar cetegory. Defaults to
								barCategoryWidth * 20%. Can also set to be a fixed value.</td>
						</tr>
						<tr>
							<td><b>{number}</b> barMinHeight</td>
							<td>0</td>
							<td>column</td>
							<td>The minimum height for the bar. Used to prevent tiny
								item values from affecting interaction.</td>
						</tr>
						<tr>
							<td><b>{number}</b> barWidth</td>
							<td>adaptive</td>
							<td>column, candlestick</td>
							<td>the width of the bar/ candlestick. Adaptive when not
								specified.</td>
						</tr>
						<tr>
							<td><b>{number}</b> barMaxWidth</td>
							<td>adaptive</td>
							<td>bar, candlestick</td>
							<td>the maximum width of the bar ( candlestick ). Adaptive
								when not specified.</td>
						</tr>
						<tr>
							<td><b>{string}</b> symbol</td>
							<td>null</td>
							<td>line, scatter</td>
							<td>A predefined shape or symbol for the marker. The default
								symbol is automatically selected from (When all symbols are
								used, new symbols are pulled from the start again. Set it
								to'none' if you don't want to show the symbol): <br /> 'circle'
								| 'rectangle' | 'triangle' | 'diamond' |<br /> 'emptyCircle' |
								'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' <br />Other
								possible values are 'heart', 'droplet', 'pin', 'arrow' and
								'star'. Although They are not included in the regular eight
								symbols above, you can use them at both series and data level.
								In addition, you can use 'star' + n (n>=3) to get N-pointed
								star, like 'star6' for six-pointed star. <br />Since 1.3.5,
								ECharts added support for setting custom image as symbol. The
								URL to an image can be given on this form:'image://' + 'URL',
								such as 'image://../asset/ico/favicon.png'. <br />See <a
								href="./example/line.html#-en" target="_blank">example 》</a>
							</td>
						</tr>
						<tr>
							<td><b>{number | Array | Function} </b>symbolSize</td>
							<td>2 | 4</td>
							<td>line (2), scatter(4)</td>
							<td>size of the symbol. It is usually a number. But if you
								use an image as symbol. To prevent stretching of image caused by
								same width and height, you can use an array as symbolSize which
								first element is width and the second is height. When
								"calculable" is enabled, it's recommended to increase symbolSize
								for better interactive experience. When implementing a bubble
								chart, symbolSize should be a Function, and the bubble size
								depends on the return value of the method, the parameter passed
								in is the current data item (value array).</td>
						</tr>
						<tr>
							<td><b>{number}</b> symbolRotate</td>
							<td>null</td>
							<td>line, scatter</td>
							<td>the angle by which the symbol is rotated. Valid range
								is: [-180,180]</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> showAllSymbol</td>
							<td>false</td>
							<td>line</td>
							<td>By default, a symbol will show only when its
								corresponding axis label does. set it to true if you need to
								show all the symbols.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> smooth</td>
							<td>false</td>
							<td>line</td>
							<td>smoothed line, while smooth is true, lineStyle.type can
								not be dashed.
						</tr>
						<tr>
							<td><b>{boolean}</b> dataFilter</td>
							<td>'nearst'</td>
							<td>line</td>
							<td>ECharts will optimize for the situation when data number
								is much larger than viewport width. It will filter the data
								showed in one pixel width. And this option is for data filtering
								strategy.<br /> Options: 'nearest', 'min', 'max', 'average'.
							</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> large</td>
							<td>false</td>
							<td>Scatter</td>
							<td>enables large scale scatter.</td>
						</tr>
						<tr>
							<td><b>{number}</b> largeThreshold</td>
							<td>2000</td>
							<td>Scatter</td>
							<td>the threshold of large scale scatter anto-switch. Valid
								when set to true.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> legendHoverLink</td>
							<td>true</td>
							<td>line, bar, scatter</td>
							<td>Enables legend hover link to the chart.</td>
						</tr>
					</table>

					<h5>
						series (pie)<a name="SeriesPie"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{Array}</b> center</td>
							<td>['50%', '50%']</td>
							<td>coordinate of the center, in pixels or percent. The
								formula for calculating percent: min(width, height) * 50%.</td>
						</tr>
						<tr>
							<td><b>{number | Array}</b> radius</td>
							<td>[0, '75%']</td>
							<td>radius, in pixels or in percent. The formula for
								calculating percent: min(width, height) / 2 * 75%. If the array
								[inner radius, outer radius] is passed in, it wil become a
								doughnut.</td>
						</tr>
						<tr>
							<td><b>{number}</b> startAngle</td>
							<td>90</td>
							<td>start angle, pie (90), gauge (225). Valid range is
								[-360,360].</td>
						</tr>
						<tr>
							<td><b>{number}</b> minAngle</td>
							<td>0</td>
							<td>The minimum angle for the pie. Used to prevent tiny item
								values from affecting interaction.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> clockWise</td>
							<td>true</td>
							<td>Specifies whether it is displayed in clockwise
								direction.</td>
						</tr>
						<tr>
							<td><b>{string}</b> roseType</td>
							<td>null</td>
							<td>>Nightingale's rose diagram. 'radius' | 'area'</td>
						</tr>
						<tr>
							<td><b>{number}</b> selectedOffset</td>
							<td>10</td>
							<td>Offset of the sector when selected.</td>
						</tr>
						<tr>
							<td><b>{boolean | string}</b> selectedMode</td>
							<td>null</td>
							<td>selected mode. Defaults to false. Can be one of single,
								multiple.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> legendHoverLink</td>
							<td>true</td>
							<td>Enables legend hover link to the chart.</td>
						</tr>
					</table>

					<h5>
						series (radar)<a name="SeriesRadar"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{number}</b> polarIndex</td>
							<td>0</td>
							<td>polar coordinates index.</td>
						</tr>
						<tr>
							<td><b>{string}</b> symbol</td>
							<td>null</td>
							<td>same as <a href="#SeriesCartesian" title="">series
									(Cartesian). </a></td>
						</tr>
						<tr>
							<td><b>{number | Array | Function} </b>symbolSize</td>
							<td>2</td>
							<td>same as <a href="#SeriesCartesian" title="">series
									(Cartesian). </a></td>
						</tr>
						<tr>
							<td><b>{number}</b> symbolRotate</td>
							<td>null</td>
							<td>same as <a href="#SeriesCartesian" title="">series
									(Cartesian). </a></td>
						</tr>
						<tr>
							<td><b>{boolean}</b> legendHoverLink</td>
							<td>true</td>
							<td>Enables legend hover link to the chart.</td>
						</tr>
					</table>

					<h5>
						series (map)<a name="SeriesMap"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean | string}</b> selectedMode</td>
							<td>null</td>
							<td>selected mode. Defaults to false. Can be one of single,
								multiple.</td>
						</tr>
						<tr>
							<td><b>{string}</b> mapType</td>
							<td>'china'</td>
							<td>map type, including World Map, China Map, Map of China
								Provinces &amp; Cities. For the mapType of China Provinces &amp;
								Cities, just use simplified Chinese. <br />新疆, 西藏, 内蒙古, 青海, 四川,
								黑龙江, 甘肃, 云南, 广西, 湖南, 陕西, <br />广东, 吉林, 河北, 湖北, 贵州, 山东, 江西, 河南,
								辽宁, 山西, 安徽, 福建, <br />浙江, 江苏, 重庆, 宁夏, 海南, 台湾, 北京, 天津, 上海, 香港,
								澳门' <br />Supports sub-region mode, which develops sub-region
								maps from the main map types. The format is 'main map type |
								sub-region name', like <br />'world|Brazil', 'china|广东'. See <a
								href="./example/map8.html#-en" target="_blank">example 》</a>
							</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> hoverable</td>
							<td>true</td>
							<td>Non-numerical display (eg: only used to display
								markPoints and markLines). Set it to false to turn off regional
								hover highlight.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> dataRangeHoverLink</td>
							<td>true</td>
							<td>enables dataRange hover link to the chart</td>
						</tr>
						<tr>
							<td><b>{Object}</b> mapLocation</td>
							<td>{x:'center',y:'center'}</td>
							<td>Map location. x, y, width, height are configurable.
								Valid values for x and y are 'top', 'bottom', 'left', 'right',
								'center', or absolute pixel value. Width and height can be set
								in pixel values. If any parameter is null, it will be adaptive
								in accordance with other parameters.</td>
						</tr>
						<tr>
							<td><b>{string}</b> mapValueCalculation</td>
							<td>'sum'</td>
							<td>Calculation of map value. Defaults to sum. Valid values
								are: 'sum' | 'average'</td>
						</tr>
						<tr>
							<td><b>{number}</b> mapValuePrecision</td>
							<td>0</td>
							<td>Decimal precision of map value calculation. Valid when
								mapValueCalculation is set to average. Defaults to rounding.If
								decimal precision is needed, set an integer greater than 0.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> showLegendSymbol</td>
							<td>true</td>
							<td>Color of show legend symbol (small dots symbolizing
								different series). Valid when there is a legend.</td>
						</tr>
						<tr>
							<td><b>{boolean | string}</b> roam</td>
							<td>false</td>
							<td>Specifies whether the wheel zoom and drag roam will be
								enabled. Default to false (boolean), can be true (boolean) and
								'scale' (string) for just enable the zoom(in/out), 'move'
								(string) for just enable the move.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> scaleLimit</td>
							<td>null</td>
							<td>Controls the limit of wheel zoom. You can specify
								{max:number, min:number}, max is magnification coefficient,
								whose valid value should be greater than 1; min is reduction
								coefficient, whose valid value should be less than 1.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> nameMap</td>
							<td>null</td>
							<td>name mapping of the custom region, like {'China' :
								'中国'}.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> textFixed</td>
							<td>null</td>
							<td>fixed location of the name text of a region in px. When
								the value is positive, move to the lower left; When the value is
								negative, move to the upper right. Such as {'China' : [10,
								-10]}.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> geoCoord</td>
							<td>null</td>
							<td>Specifies the location of the name text of a region by
								absolute latitude and longitude. For example,
								{'Islands':[113.95, 22.26]}: the name of Hong Kong's Islands
								District is located at 22.26°N and 113.95°E.</td>
						</tr>
					</table>

					<h5>
						series (force)<a name="SeriesForce"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{Array}</b> categories</td>
							<td>null</td>
							<td>Categories of nodes in the force-directed chart, see <a
								href="#categories">categories</a></td>
						</tr>
						<tr>
							<td><b>{Array}</b> nodes</td>
							<td>[]</td>
							<td>Node data in the force-directed chart. see <a
								href="#nodes(data)">nodes(data)</a>. Following are properties
								only in force graph.
								<table cellspacing="0" class="ADoc_table full">
									<tr>
										<th>Property</th>
										<th>Default</th>
										<th>Description</th>
									</tr>
									<tr>
										<td>{Array} initial</td>
										<td></td>
										<td>Forces to specify the initial value of the node. When
											not specified, it will be randomly generated within a certain
											range.</td>
									</tr>
									<tr>
										<td>{boolean} fixX</td>
										<td>false</td>
										<td>Specifies whether to fix the X-value of the node.
											Works with initial.</td>
									</tr>
									<tr>
										<td>{boolean} fixY</td>
										<td>false</td>
										<td>Specifies whether to fix the Y-value of the node.
											Works with initial.</td>
									</tr>
									<tr>
										<td>{boolean} ignore</td>
										<td>false</td>
										<td>Specifies whether to neglect the node.</td>
									</tr>
									<tr>
										<td>{boolean} draggable</td>
										<td></td>
										<td>Specifies whether the node is draggable.</td>
									</tr>
									<tr>
										<td>{number} category</td>
										<td></td>
										<td>Category index of the node.</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td><b>{Array}</b> links</td>
							<td>[]</td>
							<td>link data in the force-directed chart. see <a
								href="#GraphLinks">links</a>
						</tr>
						<tr>
							<td><b>{Array}</b> matrix</td>
							<td>[]</td>
							<td>Adjacency matrix. see <a href="#GraphMatrix">matrix</a></td>
						</tr>
						<tr>
							<td><b> {Array} center</b></td>
							<td>['50%', '50%']</td>
							<td>center of the layout, in pixels or in percent.</td>
						</tr>
						<tr>
							<td><b> {number} size</b></td>
							<td>100%</td>
							<td>size of the layout, in pixels or in percent.</td>
						</tr>
						<tr>
							<td><b>{number}</b> minRadius</td>
							<td>10</td>
							<td>the minimum radius after the vertex data is mapped to
								the circle radius.</td>
						</tr>
						<tr>
							<td><b>{number}</b> maxRadius</td>
							<td>20</td>
							<td>the maximum radius after the vertex data is mapped to
								the circle radius.</td>
						</tr>
						<tr>
							<td><b>{string}</b> symbol</td>
							<td>'circle'</td>
							<td>as <a href="#SeriesCartesian" title="">series
									(Cartesian)</a></td>
						</tr>
						<tr>
							<td><b>{number | Array}</b> symbolSize</td>
							<td></td>
							<td>size of the node.</td>
						</tr>
						<tr>
							<td><b>{string}</b> linkSymbol</td>
							<td>'none'</td>
							<td>symbol of force's link. Can be specified as 'arrow', see
								<a href="#SymbolList">symbolList</a>.
							</td>
						</tr>
						<tr>
							<td><b>{Array}</b> linkSymbolSize</td>
							<td>[10, 15]</td>
							<td>the size of force's link symbol.</td>
						</tr>
						<tr>
							<td><b>{number}</b> scaling</td>
							<td>1</td>
							<td>layout scaling factor, not entirely accurate, achieves
								similar effect with the layout size.</td>
						</tr>
						<tr>
							<td><b>{number}</b> gravity</td>
							<td>1</td>
							<td>centripetal force coefficient. The greater the
								coefficient, the closer the node is to the center.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> draggable</td>
							<td>true</td>
							<td>specifies whether the node is draggable.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> large</td>
							<td>false</td>
							<td>it is suggested that you set it to true on a chart with
								over 500 vertices, use <a
								href="http://en.wikipedia.org/wiki/Barnes–Hut_simulation">Barnes-Hut
									simulation</a>; meanwhile, open useWorker and increase the value of
								steps.
							</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> useWorker</td>
							<td>false</td>
							<td>specifies whether to put layout calculation into web
								worker when the browser supports web worker.</td>
						</tr>
						<tr>
							<td><b>{number}</b> steps</td>
							<td>1</td>
							<td>the number of iterations of each frame layout
								calculation. Since it takes much more time to render each frame
								than layout, so when using web worker you can increase the value
								of steps to balance the two, so as to achieve optimum
								efficiency.</td>
						</tr>
						<tr>
							<td><b>{boolean | string}</b> roam</td>
							<td>false</td>
							<td>Specifies whether the wheel zoom and drag roam will be
								enabled. Default to false (boolean), can be true (boolean) and
								'scale' (string) for just enable the zoom(in/out), 'move'
								(string) for just enable the move.</td>
						</tr>
					</table>

					<h5>
						series (chord)<a name="SeriesChord"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{Array}</b> categories</td>
							<td>null</td>
							<td>Categories of nodes in the chord chart, see <a
								href="#categories">categories</a></td>
						</tr>
						<tr>
							<td><b>{Array}</b> nodes</td>
							<td>[]</td>
							<td>Node data in the chord chart. see <a href="#nodes(data)">nodes(data)</a></td>
						</tr>
						<tr>
							<td><b>{Array}</b> links</td>
							<td>[]</td>
							<td>link data in the chord chart. see <a href="#GraphLinks">links</a>
						</tr>
						<tr>
							<td><b>{Array}</b> matrix</td>
							<td>[]</td>
							<td>Adjacency matrix. see <a href="#GraphMatrix">matrix</a></td>
						</tr>
						<tr>
							<td><b>{boolean}</b> ribbonType</td>
							<td>true</td>
							<td>Chord with ribbon type is drawed with sector and ribbon
								shapes. Each ribbon can represent the weight of edge with the
								size of two ends. Chord without ribbon type is drawed with
								symbols and bezier curves. Which can't represent edge weight.</td>
						</tr>
						<!-- ribbonType :flase -->
						<tr>
							<td><b>{string}</b> symbol</td>
							<td>'circle'</td>
							<td>see <a href="#SeriesCartesian" title="">series(Cartesion)</a>,
								Only available if ribbonType is false
							</td>
						</tr>
						<tr>
							<td>{number} symbolSize</td>
							<td></td>
							<td>Size of symbol, Only available if ribbonType is false</td>
						</tr>
						<tr>
							<td><b>{number}</b> minRadius</td>
							<td>10</td>
							<td>Minimum radius after mapping to symbol size . Only
								available if ribbonType is false</td>
						</tr>
						<tr>
							<td><b>{number}</b> maxRadius</td>
							<td>20</td>
							<td>Maximum radius after mapping to symbol size, . Only
								available if ribbonType is true</td>
						</tr>
						<!-- ribbonType :true -->
						<tr>
							<td><b>{boolean}</b> showScale</td>
							<td>false</td>
							<td>Specifies whether the scale will be showed. Only
								available if ribbonType is true</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> showScaleText</td>
							<td>false</td>
							<td>Specifies whether the scale text will be showed. Only
								available if ribbonType is true</td>
						</tr>
						<tr>
							<td><b>{number}</b> padding</td>
							<td>2</td>
							<td>the distance between each sector (in degrees).</td>
						</tr>
						<tr>
							<td><b>{string}</b> sort</td>
							<td>'none'</td>
							<td>Data sorting. Can be one of none, ascending, descending.
							</td>
						</tr>
						<tr>
							<td><b>{string}</b> sortSub</td>
							<td>'none'</td>
							<td>Data sorting (chord). Can be one of none, ascending,
								descending.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> clockWise</td>
							<td>false</td>
							<td>Specifies whether it is displayed in clockwise
								direction.</td>
						</tr>
					</table>

					<h5>
						series (gauge)<a name="SeriesGauge"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{Array}</b> center</td>
							<td>['50%', '50%']</td>
							<td>coordinate of the center, in pixels or percent. The
								formula for calculating percent: min(width, height) * 50%.</td>
						</tr>
						<tr>
							<td><b>{number | Array}</b> radius</td>
							<td>[0, '75%']</td>
							<td>radius, in pixels or in percent. The formula for
								calculating percent: min(width, height) / 2 * 75%. <br /> If the
								array [inner radius, outer radius] is passed in, it wil become a
								doughnut.
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> startAngle</td>
							<td>225</td>
							<td>start angle, pie (90), gauge (225). Valid range is:
								[-360,360]</td>
						</tr>
						<tr>
							<td><b>{number}</b> endAngle</td>
							<td>-45</td>
							<td>end angle. Valid range is: [-360,360], ensure that
								startAngle - endAngle is positive.</td>
						</tr>
						<tr>
							<td><b>{number}</b> min</td>
							<td>0</td>
							<td>The specified minimum value.</td>
						</tr>
						<tr>
							<td><b>{number}</b> max</td>
							<td>100</td>
							<td>The specified maximum value.</td>
						</tr>
						<tr>
							<td><b>{number}</b> splitNumber</td>
							<td>10</td>
							<td>The number of segments. Defaults to 10.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> axisLine</td>
							<td><pre>{
    show: true,
    lineStyle: {
        color: [
            [0.2, '#228b22'],
            [0.8, '#48b'],
            [1, '#ff4500']
        ],
        width: 30
    }
}                           </pre></td>
							<td>axis line. Defaults to show. <br />
							<br />The property "show" specifies whether to show axisLine or
								not. <br />
							<br />The property "lineStyle" (see <a href="#LineStyle" title="">lineStyle</a>)
								controls line style for axisLine. <br />
							<br />What makes this particular lineStyle.color different is
								that it is a two-dimensional array that can be used to divide
								the gauge axis into several parts, <br />
							<br />and designate a specific color to each part on this form:
								[[percent, color value], [...]].
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> axisTick</td>
							<td><pre>{
    show: true,
    splitNumber: 5,
    length :8,
    lineStyle: {
        color: '#eee',
        width: 1,
        type: 'solid'
    }
}                           </pre></td>
							<td>axis tick. Defaults to hide. <br />
							<br />The property "show" specifies whether to show axisTick or
								not; <br />
							<br />The property "lineStyle"(see <a href="#LineStyle" title="">lineStyle</a>)
								controls line style for axisTick; <br />
							<br />The property "splitNumber" controls the number of segments;
								<br />
							<br />The property "length" controls line length for axisTick.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> axisLabel</td>
							<td><pre>{
    show: true,
    formatter: null,
    textStyle: {
        color: 'auto'
    }
}                           </pre></td>
							<td>axis label, (see <a href="#AxisAxislabel" title="">axis.axislabel</a>).
								<br />
							<br />The property "formatter" controls axisLabel formatting; <br />
							<br />The property "textStyle" (see <a href="#TextStyle" title="">textStyle</a>)
								controls text style for axisLabel.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> splitLine</td>
							<td><pre>{
    show: true,
    length :30,
    lineStyle: {
        color: '#eee',
        width: 2,
        type: 'solid'
    }
}                           </pre></td>
							<td>split line. Defaults to show. <br />
							<br />The property "show" specifies whether to show splitLine or
								not. <br />
							<br />The property "length" controls line length for splitLine. <br />
							<br />The property "lineStyle" (see <a href="#LineStyle" title="">lineStyle</a>)
								controls line style for splitLine.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> pointer</td>
							<td><pre>{
    length : '80%',
    width : 8,
    color : 'auto'
}                           </pre></td>
							<td>pointer style <br />The property "length" controls line
								length for pointer. If in percent, it is relative to the outer
								radius of the gauge. <br />The property "width" controls the
								widest point of the pointer. <br />The property "color" controls
								the color of the pointer.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> title</td>
							<td><pre>{
    show : true,
    offsetCenter: [0, '-40%'],
    textStyle: {
        color: '#333',
        fontSize : 15
    }
}                           </pre></td>
							<td>gauge title <br />
							<br />The property "show" specifies whether to show gauge title
								or not. <br />
							<br />The property "offsetCenter" is used to locate title. Offset
								to the center coordinates if the array is x-axis. If in percent,
								it is relative to the outer radius of the gauge. <br />
							<br />The property "lineStyle" (see <a href="#TextStyle" title="">textStyle</a>)
								controls line style for gauge title.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> detail</td>
							<td><pre>{
    show : true,
    backgroundColor: 'rgba(0,0,0,0)',
    borderWidth: 0,
    borderColor: '#ccc',
    width: 100,
    height: 40,
    offsetCenter: [0, '40%'],
    formatter: null,
    textStyle: {
        color: 'auto',
        fontSize : 30
    }
}                           </pre></td>
							<td>gauge detail <br />
							<br />The property "show" specifies whether to show detail or
								not. <br />The property "backgroundColor" controls the
								background color of the detail. <br />The property "borderWidth"
								controls the width of border around the detail. <br />The
								property "borderColor" controls the color of border around the
								detail. <br />The property "width" controls the width of the
								detail. <br />The property "height" controls the height of the
								detail. <br />The property "offsetCenter" is used to locate
								title. Offset to the center coordinates if the array is x-axis.
								If in percent, it is relative to the outer radius of the gauge;
								<br />The property "formatter" controls tooltip formatting; <br />The
								property "lineStyle" (see <a href="#TextStyle" title="">textStyle</a>)
								controls line style for tooltip.
							</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> legendHoverLink</td>
							<td>true</td>
							<td>Enables legend hover link to the chart.</td>
						</tr>
					</table>

					<h5>
						series (funnel) <a name="SeriesFunnel"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{number | string}</b> x</td>
							<td>80</td>
							<td>Abscissa on the upper left corner of the grid. In px, or
								in percent (string) such as '50%' (horizontal center of the
								display area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> y</td>
							<td>60</td>
							<td>Ordinate on the upper left corner of the grid. In px, or
								in percent (string) such as '50%' (vertical center of the
								display area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> x2</td>
							<td>80</td>
							<td>Abscissa on the lower right corner of the grid. In px,
								or in percent (string) such as '50%' (horizontal center of the
								display area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> y2</td>
							<td>60</td>
							<td>Ordinate on the lower right corner of the grid. In px,
								or in percent (string) such as '50%' (vertical center of the
								display area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> width</td>
							<td>null</td>
							<td>The total width, defaults to the drawing area's total
								width - x - x2, in px, ignore x2 after specifying height. Can
								also be set in percent (string), such as '50%' (half the width
								of the display area).</td>
						</tr>
						<tr>
							<td><b>{number | string}</b> height</td>
							<td>null</td>
							<td>The total height, defaults to the drawing area's total
								height - y - y2, in px, ignore y2 after specifying height. Can
								also be set in percent (string), such as '50%' (half the height
								of the display area).</td>
						</tr>
						<tr>
							<td><b>{string}</b> funnelAlign</td>
							<td>'center'</td>
							<td>Horizontal layout style, default to 'center', other
								option can be: 'left' | 'right' | 'center'</td>
						</tr>
						<tr>
							<td><b>{number}</b> min</td>
							<td>0</td>
							<td>The specified minimum value.</td>
						</tr>
						<tr>
							<td><b>{number}</b> max</td>
							<td>100</td>
							<td>The specified maximum value.</td>
						</tr>
						<tr>
							<td><b>{string}</b> minSize</td>
							<td>'0%'</td>
							<td>The proportion of the minimum value 'min' to the total
								width. If the symbol of required min is not sharp triangle, you
								can set minSize to achieve it.</td>
						</tr>
						<tr>
							<td><b>{string}</b> maxSize</td>
							<td>'100%'</td>
							<td>The proportion of the maximum value 'max' to the total
								width.</td>
						</tr>
						<tr>
							<td><b>{string}</b> sort</td>
							<td>'descending'</td>
							<td>Data sorting, can be one of ascending, descending</td>
						</tr>
						<tr>
							<td><b>{number}</b> gap</td>
							<td>0</td>
							<td>The distance between data symbols.</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> legendHoverLink</td>
							<td>true</td>
							<td>Enables legend hover link to the chart.</td>
						</tr>
					</table>

					<h5>
						series ( eventRiver )<a name="SeriesEventRiver"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{number}</b> xAxisIndex</td>
							<td>0</td>
							<td><a href="#Xaxis" title="">xAxis</a> the index of the
								axis array. Specifies the horizontal axis that the data series
								uses.</td>
						</tr>
						<tr>
							<td><b>{number}</b> weight</td>
							<td>1</td>
							<td>Specifies the weight of this event's series.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> data</td>
							<td>[]</td>
							<td>Event list, every item in the array is an object {}, as:
								<table cellspacing="0" class="ADoc_table full">
									<tr>
										<th>Property</th>
										<th>Default</th>
										<th>Description</th>
									</tr>
									<tr>
										<td><b>{string}</b> name</td>
										<td>null</td>
										<td>event name</td>
									</tr>
									<tr>
										<td><b>{number}</b> weight</td>
										<td>1</td>
										<td>Specifies the weight of this event.</td>
									</tr>
									<tr>
										<td><b>{Array}</b> evolution</td>
										<td>[]</td>
										<td>Evolution of a single event, every item in the array
											is an object {}, as:
											<table cellspacing="0" class="ADoc_table full">
												<tr>
													<th>Property</th>
													<th>Description</th>
												</tr>
												<tr>
													<td><b>{Date}</b> time</td>
													<td>When the event is taking place, should be Data
														type of Javascript.</td>
												</tr>
												<tr>
													<td><b>{number}</b> value</td>
													<td>Popularity of the event, such as the number of
														news reports.</td>
												</tr>
												<tr>
													<td>{Object} detail</td>
													<td>Detail of the event.
														<table cellspacing="0" class="ADoc_table full">
															<tr>
																<th>Property</th>
																<th>Description</th>
															</tr>
															<tr>
																<td><b>{string}</b> link</td>
																<td>Link of the news.</td>
															</tr>
															<tr>
																<td><b>{string}</b> text</td>
																<td>Description of the news.</td>
															</tr>
															<tr>
																<td><b>{string}</b> img</td>
																<td>Image of the news.</td>
															</tr>
														</table>
													</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> legendHoverLink</td>
							<td>true</td>
							<td>Enables legend hover link to the chart.</td>
						</tr>
					</table>

					<h5>
						series ( treemap )<a name="SeriesTreemap"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{Array}</b> center</td>
							<td>['50%', '50%']</td>
							<td>coordinate of the center, in pixels or percent.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> size</td>
							<td>['80%', '80%']</td>
							<td>size of the chart, in pixels or percent.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> itemStyle</td>
							<td>{}</td>
							<td>see <a href="#ItemStyle" title="">itemStyle</a> peculiar
								properties of treemap
								<table cellspacing="0" class="ADoc_table full">
									<tr>
										<th>Property</th>
										<th>Default</th>
										<th>Description</th>
									</tr>
									<tr>
										<td><b>{Object}</b> breadcrumb</td>
										<td><pre>
{
    show: true,
    textStyle: {}
} </pre></td>
										<td>bread crumb
											<table cellspacing="0" class="ADoc_table full">
												<tr>
													<th>Property</th>
													<th>Default</th>
													<th>Description</th>
												</tr>
												<tr>
													<td><b>{Boolean}</b> show</td>
													<td>true</td>
													<td>shown or not</td>
												</tr>
												<tr>
													<td><b>{Object}</b> textStyle</td>
													<td>null</td>
													<td>see <a href="#TextStyle" title="">textStyle</a>
													</td>
												</tr>

												</tr>
											</table>

										</td>
									</tr>
									<tr>
										<td><b>{number}</b> childBorderWidth</td>
										<td>1</td>
										<td>width of borders of sub rectangles</td>
									</tr>
									<tr>
										<td><b>{string}</b> childBorderColor</td>
										<td>''</td>
										<td>color of borders of sub rectangles</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td><b>{Array}</b> data</td>
							<td>[]</td>
							<td>data list, every item in the array is an object {}, as:
								<table cellspacing="0" class="ADoc_table full">
									<tr>
										<th>Property</th>
										<th>Default</th>
										<th>Description</th>
									</tr>
									<tr>
										<td><b>{string}</b> name</td>
										<td>null</td>
										<td>name</td>
									</tr>
									<tr>
										<td><b>{Number}</b> value</td>
										<td>null</td>
										<td>value</td>
									</tr>
									<tr>
										<td>{Array} children</td>
										<td>[]</td>
										<td>children，same properties like parent's</td>
									</tr>
									<tr>
										<td><b>{Object}</b> itemStyle</td>
										<td>{}</td>
										<td>see <a href="#ItemStyle" title=""> itemStyle </a> ,
											highest weight
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>

					<h5>
						series（tree）<a name="SeriesTree"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{Object}</b> rootLocation</td>
							<td>varying</td>
							<td>coordinate of the location of the root, in pixels,
								percent or keywords. <pre>
{
    x: 'center' | 'left' | 'right' | 'x%' | {number},
    y: 'center' | 'top' | 'bottom' | 'y%' | {number}
}</pre>
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> layerPadding</td>
							<td>100</td>
							<td>padding of layers</td>
						</tr>
						<tr>
							<td><b>{number}</b> nodePadding</td>
							<td>30</td>
							<td>padding of brothers</td>
						</tr>
						<tr>
							<td><b>{string}</b> orient</td>
							<td>'vertical'</td>
							<td>direction of the tree, 'vertical' | 'horizontal' |
								'radial'</td>
						</tr>
						<tr>
							<td><b>{boolean | string}</b> roam</td>
							<td>false</td>
							<td>Specifies whether the wheel zoom and drag roam will be
								enabled. Default to false (boolean), can be true (boolean) and
								'scale' (string) for just enable the zoom(in/out), 'move'
								(string) for just enable the move.</td>
						</tr>
						<tr>
							<td><b>{string}</b> symbol</td>
							<td>'circle'</td>
							<td>see <a href="#SeriesCartesian" title="">series
									(Cartesian) </a></td>
						</tr>
						<tr>
							<td>{number|Array} symbolSize</td>
							<td>20</td>
							<td>size of nodes</td>
						</tr>
						<tr>
							<td><b>{Object}</b> itemStyle</td>
							<td>{}</td>
							<td>参见<a href="#ItemStyle" title="">itemStyle</a></td>
						</tr>
						<tr>
							<td><b>{Array}</b> data</td>
							<td>[]</td>
							<td>only one item，is Object {}，has properties：
								<table cellspacing="0" class="ADoc_table full">
									<tr>
										<th>Property</th>
										<th>Default</th>
										<th>Description</th>
									</tr>
									<tr>
										<td><b>{string}</b> name</td>
										<td>null</td>
										<td>name</td>
									</tr>
									<tr>
										<td><b>{number}</b> value</td>
										<td>null</td>
										<td>value</td>
									</tr>
									<tr>
										<td><b>{string}</b> symbol</td>
										<td>'circle'</td>
										<td>see <a href="#SeriesCartesian" title="">series
												(Cartesian)</a></td>
									</tr>
									<tr>
										<td>{number|Array} symbolSize</td>
										<td>20</td>
										<td>size of the node</td>
									</tr>
									<tr>
										<td>{Array} children</td>
										<td>[]</td>
										<td>children nodes，same properties like parent's</td>
									</tr>
									<tr>
										<td><b>{Object}</b> itemStyle</td>
										<td>{}</td>
										<td>see <a href="#ItemStyle" title=""> itemStyle </a> ,
											highest weight
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>

					<h5>
						series (venn) <a name="SeriesVenn"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{Object}</b> itemStyle</td>
							<td>{}</td>
							<td>see <a href="#ItemStyle" title="">itemStyle</a></td>
						</tr>
						<tr>
							<td><b>{Array}</b> data</td>
							<td>[]</td>
							<td>data list, contains 3 items, the first and second
								represent two collections, the third one is the intersection.
								Every item in the array is an object {}, as:
								<table cellspacing="0" class="ADoc_table full">
									<tr>
										<th>Property</th>
										<th>Default</th>
										<th>Description</th>
									</tr>
									<tr>
										<td><b>{string}</b> name</td>
										<td>null</td>
										<td>name</td>
									</tr>
									<tr>
										<td><b>{Number}</b> value</td>
										<td>null</td>
										<td>value</td>
									</tr>
									<tr>
										<td><b>{Object}</b> itemStyle</td>
										<td>{}</td>
										<td>see <a href="#ItemStyle" title=""> itemStyle </a>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>

					<h5>
						series（wordCloud）<a name="SeriesWordCloud"> </a>
					</h5>
					<P>Here is the data array generated by data-driven chart. Each
						item in the array stands for a series' options and data.</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{Array}</b> center</td>
							<td><pre> ['50%', '50%'] </pre></td>
							<td>Center of the word cloud. Can be relatively percent or
								absolutely pixel.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> size</td>
							<td><pre> ['40%', '40%'] </pre></td>
							<td>Center of the word cloud. Can be relatively percent or
								absolutely pixel.</td>
						</tr>
						<tr>
							<td><b>{Array}</b> textRotation</td>
							<td><pre>[0, 90]</pre></td>
							<td>List of optional text rotation. In default it has two
								options: horizontal(0) and vertical(90).</td>
						</tr>
						<tr>
							<td><b>{Object}</b> autoSize</td>
							<td><pre>{ 
    enable: true,
    minSize: 12
} </pre></td>
							<td>If enable text size auto calculation. It is recommand to
								enable to have a better result.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> itemStyle</td>
							<td>{}</td>
							<td>参见<a href="#ItemStyle" title="">itemStyle</a></td>
						</tr>
					</table>

					<h5>
						series.data<a name="SeriesData"> </a>
					</h5>
					<P>
						Data array in the series. In line and column, length of the array
						is equal to the length of category axis text label array <a
							href="#AxisData" title="">axis.data</a>, and there is one-to-one
						correspondence between them. The array item is usually value, such
						as:
					</P>
					<div class="code">
						<pre>[12, 34, 56, ..., 10, 23]</pre>
					</div>
					<P>When the data corresponding to a category does not exist
						(ps: 'no data' is not equal to 0), you can use '-' to indicate 'no
						data'. In line, 'no data' is showed by a breakpoint; in column,
						'no data' is showed by a missing column, such as:</P>
					<div class="code">
						<pre>[12, &#39;-&#39;, 56, ..., 10, 23]</pre>
					</div>
					<P>When you need to customize individual contents, array items
						can use objects, such as:</P>
					<div class="code">
						<pre>[
    12, 34,
    {
        value : 56,
        tooltip:{},     //custom tooltip，applicable to the item only, see tooltip
        itemStyle:{}    //custom itemStyle=，applicable to the item only, see itemStyle
    },
    ..., 10, 23
]
</pre>
					</div>
					<P>In scatter &amp; bubble, value configuration is quite
						special. Both its x-axis and y-axis can be value axis, and you
						need to specify bubble size in the bubble chart. Hence the
						configuration for scatter:</P>
					<div class="code">
						<pre>[
    {
        value : [10, 25, 5]     //[xValue, yValue, rValue] (x-axis value, y-axis value, size(optional))
    },
    [12, 15, 1]
    ...
]
</pre>
					</div>
					<P>In candlestick, value configuration is quite special. Its
						value content is an array with the length of 4, which respectively
						represents [opening price, closing price, the minimum value, the
						maximum value]</P>
					<div class="code">
						<pre>[
    {
        value : [2190.1, 2148.35, 2126.22, 2190.1] // opening price, closing price, the minimum value, the maximum value
    },
    [2242.26, 2210.9, 2205.07, 2250.63],
    ...
]
</pre>
					</div>
					<P>In pie, you need to specify the name for each part of data.
						Selected mode can be set. Hence the configuration:</P>
					<div class="code">
						<pre>[
    {
        value : 12，
        name : &#39;apple&#39;          //the name for each part of data
    },
    ...
]
</pre>
					</div>
					<P>In map, you need to specify the province for each part of
						data. Selected mode can be set. Hence the configuration:</P>
					<div class="code">
						<pre>[
    {
        name: '北京',
        value: 1234,
        selected: true
    },
    {
        name: '天津',
        value: 321
    },
    ...
]
</pre>
					</div>

					<h5>
						series.markPoint<a name="SeriesMarkPoint"> </a>
					</h5>
					<P>markPoint in the series</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> clickable</td>
							<td>true</td>
							<td>Specifies data graphic clickable or not, default to
								true, recommend to false when you do not have a click event
								handler.</td>
						</tr>
						<tr>
							<td><b>{string}</b> symbol</td>
							<td>'pin'</td>
							<td>the symbol of markPoint, same as series' <a
								href="#Series">symbol</a>.
							</td>
						</tr>
						<tr>
							<td><b>{number | Array | Function} </b> symbolSize</td>
							<td>10</td>
							<td>the size of markPoint symbol, same as series' <a
								href="#Series">symbolSize</a>.
							</td>
						</tr>
						<tr>
							<td><b>{number}</b> symbolRotate</td>
							<td>null</td>
							<td>the angle by which markPoint symbol rotates, same as
								series' <a href="#Series">symbolRotate</a>.
							</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> large</td>
							<td>false</td>
							<td>Specifies whether the large scale markPoint mode will be
								enabled. </a>
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> effect</td>
							<td><pre>{
    show: false,
    type: 'scale',
    loop: true,
    period: 15,
    scaleSize : 2,
    bounceDistance: 10,
    color : null,
    shadowColor : null,
    shadowBlur : 0
}                           </pre></td>
							<td>glow effect for markPoint symbol: <br />show: specifies
								whether to show glow effect or not. Defaults to false. <br />type
								effect type, default to 'scale', can be 'bounce'. <br />loop:
								specifies whether to play the animation in a loop. Defaults to
								true. <br />period: animation period. No units. The larger the
								value, the slower. Defaults to 15. <br />scaleSize:
								magnification. Based on markPoint symbolSize, available when
								type is scale. <br />bounceDistance bouncing distance, in px,
								available when type is bounce. <br />color: color of the glow.
								The default value is pulled from the markPoint itemStyle array.
								<br />shadowColor: color of the shadow. The default value is
								pulled from the color array. <br />shadowBlur: blur degree of
								shadow. Defaults to 0. <br />
							<a href="./example/map11.html#-en" target="_blank">Baidu
									Migration (Simulation) »</a>
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> itemStyle</td>
							<td>{...}</td>
							<td>style for markPoint symbol, same as series' <a
								href="#Series">itemStyle</a>.
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> geoCoord</td>
							<td>{}</td>
							<td>applicable to maps only. Specifies the location of the
								the markPoint symbol, same as series' <a href="#Series">geoCoord</a>.
							</td>
						</tr>
						<tr>
							<td><b>{Array}</b> data</td>
							<td>[]</td>
							<td>data of markPoint symbol, see below.</td>
						</tr>
					</table>

					<h5>
						series.markPoint.data<a name="SeriesMarkPointData"> </a>
					</h5>
					<P>markPoint data array. The most direct data items can
						directly specify markPoint position (x, y) and the relevant name
						and value. It's basically like this in pie, radar, force, and
						chord:</P>
					<div class="code">
						<pre>data : [
    {name: 'markPoint1', value: 100, x: 50, y: 20},
    {name: 'markPoint2', value: 200, x: 150, y: 120},
    ...
]</pre>
					</div>
					<P>In Cartesian charts like line, bar, candlestick, and
						scatter, directly specifying the location is not the only choice
						you've got. If you want to locate markPoint by Cartesian system,
						you can make it via xAxis, yAxis. These two values ​​will, in
						accordance with the specific axis type and parameters passed in,
						make automatic convertions as follows:</P>
					<div class="code">
						<pre>data : [
    {name: 'markPoint1', value: 100, xAxis: 1, yAxis: 20},      // When xAxis is the category axis, value 1 will be understood as the index of the category axis.
    {name: 'markPoint2', value: 100, xAxis: 'Wednesday', yAxis: 20}, // When xAxis is the category axis, String 'Wednesday' will be understood as matching the category axis text.
    {name: 'markPoint3', value: 200, xAxis: 10, yAxis: 20},     // When xAxis/yAxis is the value axis, whatever passed in will be understood as a value and be conversed to location.
    ...
]</pre>
					</div>
					<P>And the most practical bit is, in line, bar and scatter, you
						can directly use the following off-the-shelf special points as
						markPoints:</P>
					<div class="code">
						<pre>data : [
    {type : 'max', name: 'custom name'},    // the maximum value
    {type : 'min', name: 'custom name'}     // the minimum value
]</pre>
					</div>
					<P>markPoints are quite special and yet most commonly used in
						maps. In addition to direct location, if you want it to be based
						on geographic coordinates, and zoom with the map's scale roaming,
						you need to provide a geoCoord for markPoint, as follows.</P>
					<div class="code">
						<pre>data : [
    {name: '北京', value: 100},
    {name: '上海', value: 200},
    ...
],
geoCoord : {
    "北京":[116.46,39.92],           // Supports array [longitude, latitude]
    "上海": {x: 121.48, y: 31.22},   // Supports object {x: longitude, y: latitude}
    ...
}
</pre>
					</div>

					<h5>
						series.markLine<a name="SeriesMarkLine"> </a>
					</h5>
					<P>markLine in the series</P>
					<table cellspacing="0" class="ADoc_table full">
						<tr>
							<th>Property</th>
							<th>Default</th>
							<th>Description</th>
						</tr>
						<tr>
							<td><b>{boolean}</b> clickable</td>
							<td>true</td>
							<td>Specifies data graphic clickable or not, default to
								true, recommend to false when you do not have a click event
								handler.</td>
						</tr>
						<tr>
							<td><b>{Array | string}</b> symbol</td>
							<td>['circle', 'arrow']</td>
							<td>symbols of the start and end of markLine. If the two are
								the same, string can be directly passed in. Same as series' <a
								href="#Series">symbol</a>.
							</td>
						</tr>
						<tr>
							<td><b>{Array | number | Function}</b> symbolSize</td>
							<td>[2, 4]</td>
							<td>sizes of the start and end symbols of markLine.
								Half-width (radius) parameters. If the two are the same, number
								or function can be directly passed in. Same as series' <a
								href="#Series">symbolSize</a>.
							</td>
						</tr>
						<tr>
							<td><b>{Array | number} </b>symbolRotate</td>
							<td>null</td>
							<td>angles by which the start and end markLine symbols
								rotate, same as series' <a href="#Series">symbolRotate</a>.
							</td>
						</tr>
						<tr>
							<td><b>boolean</b> large</td>
							<td>false</td>
							<td>If enable optimization for large scale markline. Large
								scale means line number >= 2k. <br />Optimization will batch
								lines drawing. Lines of series will force to have same style.
								And symbols of two end of line will be ignore.
							</td>
						</tr>
						<tr>
							<td><b>{boolean}</b> smooth</td>
							<td>false</td>
							<td>smoothed line, while smooth is true, lineStyle.type can
								not be dashed.</td>
						</tr>
						<tr>
							<td><b>{number}</b> smoothness</td>
							<td>0.2</td>
							<td>Line smoothness. Only available when smooth is true</td>
						</tr>
						<tr>
							<td><b>{number}</b> precision</td>
							<td>2</td>
							<td>precision, use for the average markLine.</td>
						</tr>
						<tr>
							<td><b>{Object}</b> bundling</td>
							<td><pre>{
    enable: false,
    maxTurningAngle: 45
}</pre></td>
							<td>Edge Bundling <br /> <br />enable: If enable edge
								bundling. <br />maxTurningAngle: Max turning angle of bundled
								edge, ranges from 0 degree to 90 degree. <br /> <br />Tip：Edge
								bundling use algorithm from "Multilevel Agglomerative Edge
								Bundling for Visualizing Large Graphs"
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> effect</td>
							<td><pre>{
    show: false,
    loop: true,
    period: 15,
    scaleSize : 2,
    color : null,
    shadowColor : null,
    shadowBlur : null
}                           </pre></td>
							<td>glow effect for markLine symbol: <br /> <br />show:
								specifies whether to show. Defaults to false. <br />loop:
								specifies whether to play the animation in a loop. Defaults to
								true. <br />period: animation period. No units. The larger the
								value, the slower. Defaults to 15. <br />scaleSize:
								magnification. Based on markLine lineWidth. <br />color: color
								of the glow. The default value is pulled from the markLine
								itemStyle array. <br />shadowColor: color of the shadow. The
								default value is pulled from the color array. <br />shadowBlur:
								blur degree of shadow. The default value is based on scaleSize.
								<br />
							<a href="./example/map11.html#-en" target="_blank">Baidu
									Migration (Simulation) » </a>
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> itemStyle</td>
							<td>{...}</td>
							<td>style for markLine symbol, same as series' <a
								href="#Series">itemStyle</a>
							</td>
						</tr>
						<tr>
							<td><b>{Object}</b> geoCoord</td>
							<td>{}</td>
							<td>applicable to maps only. Specifies the location of the
								the markLine symbol, same as series' <a href="#Series">geoCoord</a>
							</td>
						</tr>
						<tr>
							<td><b>{Array}</b> data</td>
							<td>[]</td>
							<td>data of markLine symbol, see below.</td>
						</tr>
					</table>

					<h5>
						series.markLine.data<a name="SeriesMarkLineData"> </a>
					</h5>
					<P>markLine data array. The most direct data items can directly
						specify the start and end position of markLine (x, y) and its
						relevant name and value. It's basically like this in pie, radar,
						force and chord:</P>
					<div class="code">
						<pre>data : [
    [
        {name: 'start of markLine1', value: 100, x: 50, y: 20},
        {name: 'end of markLine1', x: 150, y: 120}
    ],
    [
        {name: 'start of markLine2', value: 200, x: 30, y: 80},
        {name: 'end of markLine2', x: 270, y: 190}
    ],
    ...
]</pre>
					</div>
					<P>In Cartesian charts like line, bar, candlestick and scatter,
						directly specifying the location is not the only choice you've
						got. If you want to locate markLine by Cartesian system, you can
						make it via xAxis, yAxis. These two values ​​will, in accordance
						with the specific axis type and parameters passed in, make
						automatic convertions as follows:</P>
					<div class="code">
						<pre>data : [
    [
        {name: 'start of markLine1', value: 100, xAxis: 1, yAxis: 20},      // When xAxis is the category axis, value 1 will be understood as the index of the category axis. By xAxis: -1 | MAXNUMBER, markLine can reach the edge of the grid.
        {name: 'end of markLine1', xAxis: 'Wednesday', yAxis: 20},          // When xAxis is the category axis, String 'Wednesday' will be understood as matching the category axis text.
    ],
    [
        {name: 'start of markLine2', value: 200, xAxis: 10, yAxis: 20},     // When xAxis/yAxis is the value axis, whatever passed in will be understood as a value and be conversed to location.
        {name: 'end of markLine2', xAxis: 270, yAxis: 190}
    ],
    ...
]</pre>
					</div>
					<P>And the most practical bit is, in line, bar and scatter, you
						can directly use the following off-the-shelf special lines as
						markLines:</P>
					<div class="code">
						<pre>data : [
    {type : 'max', name: 'custom name'},    // horizontal or vertical line of the maximum value
    {type : 'min', name: 'custom name'},    // horizontal or vertical line of the minimum value
    {type : 'average', name: 'custom name'},// horizontal or vertical line of the average value

    // the line from minimum value to maximum value
    [
        {type : 'min', name: 'custom name'},
        {type : 'max', name: 'custom name'}
    ],

    // in scatter, there are two value axes. By default the special point is calculated through the y-axis value, you can specify x-axis special point via Index: 0.
    {type : 'max', name: 'custom name', valueIndex:0}
]</pre>
						<P>markLines are quite special and yet most commonly used in
							maps. In addition to direct location, if you want it to be based
							on geographic coordinates, and zoom with the map's scale roaming,
							you need to provide a geoCoord for markLine, as follows.</P>
						<div class="code">
							<pre>data : [
    [
        {name: '北京', value: 100},
        {name:'上海'}
    ],
    [
        {name: '北京', value: 100},
        {name:'广州'}
    ],
    ...
],
geoCoord : {
    "北京":[116.46,39.92],           // Supports array [longitude, latitude]
    "广州":[113.23,23.16],
    "上海": {x: 121.48, y: 31.22},   // Supports object {x: longitude, y: latitude}
    ...
}
</pre>
						</div>

						<h4>
							itemStyle<a name="ItemStyle"> </a>
						</h4>
						<P>shape style for items. Sets the default style and emphsis
							style (style when hovered)for items in the chart:</P>
						<div class="code">
							<pre>itemStyle: {
    normal: {
        ...
    },
    emphasis: {
        ...
    }
}
</pre>
						</div>
						<P>the normal property and emphasis property are objects. They
							include:</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Type of application</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{color | Function}</b> color</td>
								<td>varying according to chart types</td>
								<td>universal</td>
								<td>color, dominant color, function paramater is <br />{seriesIndex:x,
									series:xxx, dataIndex:y, data:yyy}
								</td>
							</tr>
							<tr>
								<td><b>{Object}</b> lineStyle</td>
								<td>varying according to chart types</td>
								<td>line, candlestick, markLine</td>
								<td>line style, see <a href="#LineStyle" title="">lineStyle</a>.
								</td>
							</tr>
							<tr>
								<td><b>{Object}</b> areaStyle</td>
								<td>varying according to chart types</td>
								<td>stacked line, map</td>
								<td>area style, see <a href="#AreaStyle" title="">areaStyle</a>.
								</td>
							</tr>
							<tr>
								<td><b>{Object}</b> chordStyle</td>
								<td>varying according to chart types</td>
								<td>chord</td>
								<td>chord style, see <a href="#ChordStyle" title="">chordStyle</a>.
								</td>
							</tr>
							<tr>
								<td><b>{Object}</b> nodeStyle</td>
								<td>varying according to chart types</td>
								<td>force</td>
								<td>node style, see <a href="#NodeStyle" title="">nodeStyle</a>.
								</td>
							</tr>
							<tr>
								<td><b>{Object}</b> linkStyle</td>
								<td>varying according to chart types</td>
								<td>force</td>
								<td>link style, see <a href="#LinkStyle" title="">linkStyle</a>.
								</td>
							</tr>
							<tr>
								<td><b>{string}</b> borderColor</td>
								<td>varying</td>
								<td>line (symbol), scatter (symbole), pie, map, markPoint</td>
								<td>color of border.</td>
							</tr>
							<tr>
								<td><b>{number}</b> borderWidth</td>
								<td>varying</td>
								<td>line (symbol), scatter (symbole), pie, map, markPoint</td>
								<td>width of column border, in px.</td>
							</tr>
							<tr>
								<td><b>{string}</b> barBorderColor</td>
								<td>'#fff'</td>
								<td>bar (column)</td>
								<td>color of border.</td>
							</tr>
							<tr>
								<td><b>{number | Array}</b> barBorderRadius</td>
								<td>0</td>
								<td>bar (column)</td>
								<td>radius of bar (column) border, in px, defaults to 0.
									can be Array to assign a radius to the 4 corners, such as [5,
									5, 0, 0](clockwise as left-top, right-top, right-bottom,
									left-bottom)</td>
							</tr>
							<tr>
								<td><b>{number}</b> barBorderWidth</td>
								<td>0</td>
								<td>bar (column)</td>
								<td>width of bar (column) border, in px, defaults to 0.</td>
							</tr>
							<tr>
								<td><b>{Object}</b> label</td>
								<td><pre>{
    show: true,
    position:'outer'
}                           </pre></td>
								<td>line, column, candlestick, scatter, pie, map, force,
									markPoint, markLine</td>
								<td>In pie, displayed on the outside by default.
									labelLine.length controls the label's distance from the pie. <br />In
									funnel, displayed on the right by default. labelLine.length
									controls the label's distance from the funnel. <br />In map,
									the location of labels cannot be specified. <br /> position can
									be specified in line, column, candlestick, scatter. See below.
								</td>
							</tr>
							<tr>
								<td><b>{Object}</b> labelLine</td>
								<td>{show: true}</td>
								<td>pie, funnel</td>
								<td>the visual guide of labels in pie. Defaults to show.</td>
							</tr>
						</table>
						<P>label property is the object. It includes:</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{boolean}</b> show</td>
								<td>true</td>
								<td>Specifies whether to show label. Valid values are: true
									(show) | false (hide).</td>
							</tr>
							<tr>
								<td><b>{string}</b> position</td>
								<td>'outer' | null</td>
								<td>the position to show label. Cannot be specified in
									maps. <br />In pie, valid values are: 'outer' | 'inner'; <br />In
									funnel, valid value are: 'inner' | 'left' | 'right' (default)，
									<br />In line, column, candlestick and scatter, the default
									value is 'top' (for vertical layout) or 'right' (for horizontal
									layout). Can also be one of: 'inside' | 'left' | 'bottom'; <br />In
									column, other possible values are: 'insideLeft' | 'insideRight'
									| 'insideTop' | 'insideBottom'.
								</td>
							</tr>
							<tr>
								<td><b>{boolean}</b> rotate</td>
								<td>false</td>
								<td>applicable to chord. Label rotates automatically.</td>
							</tr>
							<tr>
								<td><b>{number}</b> distance</td>
								<td>10</td>
								<td>In chord, Label's distance from chord after it rotates
									automatically. <br /> In pie, this distance means the factor of
									label distance and pie radius(In ring chart, is sum of inner
									and outer radius), default to <b>0.5</b>.
								</td>
							</tr>
							<tr>
								<td><b>{string | Function}</b> formatter</td>
								<td>null</td>
								<td>label text formatter, universal, same as <a
									href="#Tooltip" title="">Tooltip.formatter</a>, Supports
									template, method callback. Does not support asynchronous
									callback.
								</td>
							</tr>
							<tr>
								<td><b>{Object}</b> textStyle</td>
								<td>null</td>
								<td>style for label text, (see <a href="#TextStyle"
									title="">textStyle</a>).
								</td>
							</tr>
							<tr>
								<td><b>{Number}</b> x</td>
								<td>varying</td>
								<td>only in treemap，x-coordinate in px of text</td>
							</tr>
							<tr>
								<td><b>{Number}</b> y</td>
								<td>varying</td>
								<td>only in treemap，y-coordinate in px of text</td>
							</tr>
						</table>
						<P>labelLine property is the object. It includes:</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{boolean}</b> show</td>
								<td>true</td>
								<td>Specifies whether to show labelLine. Valid values are:
									true (show) | false (hide).</td>
							</tr>
							<tr>
								<td><b>{number}</b> length</td>
								<td>40</td>
								<td>length of the line. Starts from the outer edge. Can be
									negative. In funnel, length can be 'auto'</td>
							</tr>
							<tr>
								<td><b>{Object}</b> lineStyle</td>
								<td>varying</td>
								<td>line style, see <a href="#LineStyle" title="">lineStyle</a>.
								</td>
							</tr>
						</table>
						<P>By effectively setting the normal and emphasis options of
							itemStyle, you can personalize your display strategies. For
							example, if you want to have text labels in pie hidden by
							default, and a red visual guide displayed in the outer region of
							the pie when the mouse hovers over, you can try the following
							configuration:</P>
						<div class="code">
							<pre>itemStyle: {
    normal: {
        label: {
            show: false
        }
        labelLine: {
            show: false
        }
    } ,
    emphasis: {
        label: {
            show: true,
            position: &#39;outer&#39;
        }
        labelLine: {
            show: true,
            lineStyle: {
                color: &#39;red&#39;
            }
        }
    }
}
</pre>
						</div>
						<p>high customizability:</p>
						<p>
							line <a href="example/line.html#-en" target="_blank">try this
								»</a>, column <a href="example/bar.html#-en" target="_blank">try
								this »</a>, candlestick <a href="example/k.html#-en" target="_blank">try
								this »</a>, scatter <a href="example/scatter.html#-en"
								target="_blank">try this »</a>, pie <a
								href="example/pie.html#-en" target="_blank">try this »</a>，
							chord <a href="example/chord.html#-en" target="_blank">try
								this »</a>, force <a href="example/force1.html#-en" target="_blank">try
								this »</a>, map <a href="example/map.html#-en" target="_blank">try
								this »</a>, gauge <a href="example/gauge.html#-en" target="_blank">try
								this »</a>, funnel <a href="example/funnel.html#-en" target="_blank">try
								this »</a>
						</p>

						<h4>
							lineStyle<a name="LineStyle"> </a>
						</h4>
						<P>style for line (line segment)</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{color}</b> color</td>
								<td>varying</td>
								<td>color</td>
							</tr>
							<tr>
								<td><b>{string}</b> type</td>
								<td>'solid'</td>
								<td>line style. Valid values are: 'solid' | 'dotted' |
									'dashed', and can be 'curve' | 'broken' in tree structures.</td>
							</tr>
							<tr>
								<td><b>{number}</b> width</td>
								<td>varying</td>
								<td>width of the line.</td>
							</tr>
							<tr>
								<td><b>{color=}</b> shadowColor</td>
								<td>rgba(0,0,0,0)</td>
								<td>applicable to the main line (in IE8+). Color of the
									shadow. Supports rgba.</td>
							</tr>
							<tr>
								<td><b>{number=}</b> shadowBlur</td>
								<td>5</td>
								<td>applicable to the main line (in IE8+). Blur degree of
									the shadow. Valid values are positive.</td>
							</tr>
							<tr>
								<td><b>{number=}</b> shadowOffsetX</td>
								<td>3</td>
								<td>applicable to the main line (in IE8+). Horizontal
									offset of the shadow. Right when positive, left when negative.
								</td>
							</tr>
							<tr>
								<td><b>{number=}</b> shadowOffsetY</td>
								<td>3</td>
								<td>applicable to the main line (in IE8+). Vertical offset
									of the shadow. Down when positive, up when negative.</td>
							</tr>
						</table>

						<h4>
							areaStyle<a name="AreaStyle"> </a>
						</h4>
						<P>fill style for area</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{color}</b> color</td>
								<td>varying</td>
								<td>color</td>
							</tr>
							<tr>
								<td><b>{string}</b> type</td>
								<td>'default'</td>
								<td>Fill style, currently only supports 'default' (solid
									fill).</td>
							</tr>
						</table>

						<h4>
							chordStyle<a name="ChordStyle"> </a>
						</h4>
						<P>chord style for the chord chart</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{number}</b> width</td>
								<td>1</td>
								<td>Width of bezier curve, Only available when ribbonType
									is false</td>
							</tr>
							<tr>
								<td><b>{string}</b> color</td>
								<td>1</td>
								<td>Color of bezier curve, Only available when ribbonType
									is false</td>
							</tr>
							<tr>
								<td><b>{string}</b> borderWidth</td>
								<td>1</td>
								<td>Border width of ribbon shape, Only available when
									ribbonType is true</td>
							</tr>
							<tr>
								<td><b>{string}</b> borderColor</td>
								<td>1</td>
								<td>Border color of ribbon shape, Only available when
									ribbonType is true</td>
							</tr>
						</table>

						<h4>
							nodeStyle<a name="NodeStyle"> </a>
						</h4>
						<P>node style for the force-directed chart</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{color}</b> color</td>
								<td>'#f08c2e'</td>
								<td>fill color.</td>
							</tr>
							<tr>
								<td><b>{color}</b> borderColor</td>
								<td>'#5182ab'</td>
								<td>stroke color.</td>
							</tr>
							<tr>
								<td><b>{number}</b> borderWidth</td>
								<td>1</td>
								<td>width of the stroke line.</td>
							</tr>
						</table>

						<h4>
							linkStyle<a name="LinkStyle"> </a>
						</h4>
						<P>link style for the force-directed chart</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{string}</b> type</td>
								<td>'line'</td>
								<td>line style, can be: 'curve' | 'line'</td>
							</tr>
							<tr>
								<td><b>{color}</b> color</td>
								<td>'#5182ab'</td>
								<td>color of the line</td>
							</tr>
							<tr>
								<td><b>{number}</b> width</td>
								<td>1</td>
								<td>width of the line</td>
							</tr>
						</table>

						<h4>
							textStyle<a name="TextStyle"> </a>
						</h4>
						<P>text style</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{color}</b> color</td>
								<td>varying</td>
								<td>color</td>
							</tr>
							<tr>
								<td><b>{string}</b> decoration</td>
								<td>'none'</td>
								<td>decoration. Applicable to tooltip.textStyle only.</td>
							</tr>
							<tr>
								<td><b>{string}</b> align</td>
								<td>varying</td>
								<td>horizontal alignment. Valid values are: 'left' |
									'right' | 'center'.</td>
							</tr>
							<tr>
								<td><b>{string}</b> baseline</td>
								<td>varying</td>
								<td>vertical alignment. Valid values are: 'top' | 'bottom'
									| 'middle'.</td>
							</tr>
							<tr>
								<td><b>{string}</b> fontFamily</td>
								<td>'Arial, Verdana, sans-serif'</td>
								<td>font family.</td>
							</tr>
							<tr>
								<td><b>{number}</b> fontSize</td>
								<td>12</td>
								<td>font size, in px.</td>
							</tr>
							<tr>
								<td><b>{string}</b> fontStyle</td>
								<td>'normal'</td>
								<td>font style. Valid values are: 'normal' | 'italic' |
									'oblique'.</td>
							</tr>
							<tr>
								<td><b>{string | number}</b> fontWeight</td>
								<td>'normal'</td>
								<td>font weight. Valid values are: 'normal' | 'bold' |
									'bolder' | 'lighter' | 100 | 200 |... | 900.</td>
							</tr>
						</table>

						<h4>
							loadingOption<a name="Loadingoption"> </a>
						</h4>
						<P>
							The loading options control the appearance of the loading screen
							that covers the plot area on chart operations. <a
								href="example/loading.html#-en" target="_blank">Try this »</a>
						</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{string}</b> text</td>
								<td>'数据读取中...'</td>
								<td>The loading text that appears when the chart is set
									into the loading state. \n' represents a line feed.</td>
							</tr>
							<tr>
								<td><b>{string | number}</b> x</td>
								<td>'center'</td>
								<td>horizontal position. Defaults to center. Valid values
									are: 'center' | 'left' | 'right' | <b>{number}</b>(x-coordinate,
									in px).
								</td>
							</tr>
							<tr>
								<td><b>{string | number}</b> y</td>
								<td>'center'</td>
								<td>vertical position. Defaults to center. Valid values
									are: 'center' | 'bottom' | 'top' | <b>{number}</b>(y-coordinate,
									in px).
								</td>
							</tr>
							<tr>
								<td><b>{Object}</b> textStyle</td>
								<td>null</td>
								<td>style for the loading text, (see <a href="#TextStyle"
									title="">textStyle</a>).
								</td>
							</tr>
							<tr>
								<td><b>{string | Function}</b> effect</td>
								<td>'spin'</td>
								<td>loading effect. Valid values are: 'spin' | 'bar' |
									'ring' | 'whirling' | 'dynamicLine' | 'bubble'. Supports
									external loading.</td>
							</tr>
							<tr>
								<td><b>{Object}</b> effectOption</td>
								<td>null</td>
								<td>option for loading effect, see zrender.</td>
							</tr>
							<tr>
								<td><b>{number}</b> progress</td>
								<td>null</td>
								<td>Specifies the current progress [0~1]. Applicable to
									specific effects.</td>
							</tr>
						</table>

						<h4>
							noDataLoadingOption<a name="NoDataLoadingOption"> </a>
						</h4>
						<P>
							The loading options for none data control the appearance of the
							loading screen that covers the plot area on chart operations. <a
								href="example/loading.html#-en" target="_blank">Try this »</a>
						</P>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{string}</b> text</td>
								<td>'暂无数据'</td>
								<td>The loading text that appears when the chart is set
									into the loading state. \n' represents a line feed.</td>
							</tr>
							<tr>
								<td><b>{string | number}</b> x</td>
								<td>'center'</td>
								<td>horizontal position. Defaults to center. Valid values
									are: 'center' | 'left' | 'right' | <b>{number}</b>(x-coordinate,
									in px).
								</td>
							</tr>
							<tr>
								<td><b>{string | number}</b> y</td>
								<td>'center'</td>
								<td>vertical position. Defaults to center. Valid values
									are: 'center' | 'bottom' | 'top' | <b>{number}</b>(y-coordinate,
									in px).
								</td>
							</tr>
							<tr>
								<td><b>{Object}</b> textStyle</td>
								<td>null</td>
								<td>style for the loading text, (see <a href="#TextStyle"
									title="">textStyle</a>).
								</td>
							</tr>
							<tr>
								<td><b>{string | Function}</b> effect</td>
								<td>'bubble'</td>
								<td>loading effect. Valid values are: 'spin' | 'bar' |
									'ring' | 'whirling' | 'dynamicLine' | 'bubble'. Supports
									external loading.</td>
							</tr>
							<tr>
								<td><b>{Object}</b> effectOption</td>
								<td>null</td>
								<td>option for loading effect, see zrender.</td>
							</tr>
							<tr>
								<td><b>{number}</b> progress</td>
								<td>null</td>
								<td>Specifies the current progress [0~1]. Applicable to
									specific effects.</td>
							</tr>
						</table>

						<h4>
							backgroundColor<a name="BackgroundColor"> </a>
						</h4>
						<P>
							<b>{color}</b> Null. The background color or gradient for the
							outer chart area. Defaults to null. Same as 'rgba(0,0,0,0)'.
						</P>

						<h4>
							color<a name="Color"> </a>
						</h4>
						<P>
							<b>{Array}</b> [ <br />&nbsp;&nbsp;&nbsp;&nbsp;'#ff7f50',
							'#87cefa', '#da70d6', '#32cd32', '#6495ed', <br />&nbsp;&nbsp;&nbsp;&nbsp;'#ff69b4',
							'#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', <br />&nbsp;&nbsp;&nbsp;&nbsp;'#1e90ff',
							'#ff6347', '#7b68ee', '#00fa9a', '#ffd700', <br />&nbsp;&nbsp;&nbsp;&nbsp;'#6b8e23',
							'#ff00ff', '#3cb371', '#b8860b', '#30e0e0' <br />], An array
							containing the default colors. When all colors are used, new
							colors are pulled from the start again.
						</P>

						<h4>
							symbolList<a name="SymbolList"> </a>
						</h4>
						<P>
							<b>{Array}</b> [ <br />&nbsp;&nbsp;&nbsp;&nbsp;'circle',
							'rectangle', 'triangle', 'diamond', <br />&nbsp;&nbsp;&nbsp;&nbsp;'emptyCircle',
							'emptyRectangle', 'emptyTriangle', 'emptyDiamond' <br />], An
							array containing the default symbols. When all symbols are used,
							new symbols are pulled from the start again.
						</P>

						<h4>
							renderAsImage<a name="RenderAsImage"> </a>
						</h4>
						<P>{boolean | string} false, supports render as image in
							non-IE8- browsers, can be set to true or specify image formats
							(png | jpeg). After rendered as image, the instance is still
							available (such as setOption, resize, etc.), but its various
							interactions will become invalid.</P>

						<h4>
							calculable<a name="Calculable"> </a>
						</h4>
						<P>
							<b>{boolean}</b> false, specifies whether the drag-recalculate
							feature will be enabled, defaults to false.
						</P>

						<h4>
							calculableColor<a name="CalculableColor"> </a>
						</h4>
						<P>
							<b>{color}</b> 'rgba(255,165,0,0.6)', color of border around
							drag-recalculate.
						</P>

						<h4>
							calculableHolderColor<a name="CalculableHolderColor"> </a>
						</h4>
						<P>
							<b>{color}</b> '#ccc', color of calculable holder.
						</P>

						<h4>
							nameConnector<a name="NameConnector"> </a>
						</h4>
						<P>
							<b>{string}</b> ' &amp; ', a connector that links the names of
							data series together after the combination of data series.
						</P>

						<h4>
							valueConnector<a name="ValueConnector"> </a>
						</h4>
						<P>
							<b>{string}</b> ' : ', a connector that links the name of data
							series with value when island appears after the combination of
							data series.
						</P>

						<h4>
							animation<a name="Animation"> </a>
						</h4>
						<P>
							<b>{boolean}</b> true, specifies whether the initial animation
							will be enabled, defaults to true. It is suggested to disable the
							initial animation in IE8-.
						</P>

						<h4>
							addDataAnimation<a name="AddDataAnimation"> </a>
						</h4>
						<P>
							<b>{boolean}</b> true, specifies whether the dynamic data
							interface animation will be enabled, defaults to true. It is
							suggested to disable animation in IE8-.
						</P>

						<h4>
							animationThreshold<a name="AnimationThreshold"> </a>
						</h4>
						<P>
							<b>{number}</b> 2500, threshold of animated elements. No
							animation if the graphic elements generated are over 2500. It is
							suggested to disable animation in IE8-.
						</P>

						<h4>
							animationDuration<a name="AnimationDuration"> </a>
						</h4>
						<P>
							<b>{number}</b> 2000, duration of the enter animation, in ms.
						</P>

						<h4>
							animationDurationUpdate<a name="animationDurationUpdate"> </a>
						</h4>
						<P>
							<b>{number}</b> 500，duration of the update animation, in ms.
						</P>

						<h4>
							animationEasing<a name="AnimationEasing"> </a>
						</h4>
						<P>
							<b>{string}</b> 'BounceOut', easing effect of the main element.
							Supports multi-level control. See <a
								href="http://ecomfe.github.io/zrender/doc/doc.html#animation.easing"
								target="_blank">zrender.animation.easing</a>. Possible values
							are: <br /> 'Linear',<br /> 'QuadraticIn', 'QuadraticOut',
							'QuadraticInOut',<br /> 'CubicIn', 'CubicOut', 'CubicInOut',<br />
							'QuarticIn', 'QuarticOut', 'QuarticInOut',<br /> 'QuinticIn',
							'QuinticOut', 'QuinticInOut',<br /> 'SinusoidalIn',
							'SinusoidalOut', 'SinusoidalInOut',<br /> 'ExponentialIn',
							'ExponentialOut', 'ExponentialInOut',<br /> 'CircularIn',
							'CircularOut', 'CircularInOut',<br /> 'ElasticIn', 'ElasticOut',
							'ElasticInOut',<br /> 'BackIn', 'BackOut', 'BackInOut',<br />
							'BounceIn', 'BounceOut', 'BounceInOut'<br />
						</P>

						<h4>
							Graph data structure<a name="GraphDataStructure"> </a>
						</h4>
						<p>Force and chord use graph to represent the data. You can
							put the nodes(vertices) of graph in a nodes or data property. put
							the links(edges) of graph in a links or matrix property. In
							addition, each node can have a category property.</p>

						<h5>
							categories<a name="categories"></a>
						</h5>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{string}</b> name</td>
								<td></td>
								<td>Name of category</td>
							</tr>
							<tr>
								<td><b>{string}</b> symbol</td>
								<td>'circle'</td>
								<td>See <a href="#SeriesCartesian" title="">series
										(Cartesian)</a></td>
							</tr>
							<tr>
								<td>{number | Array} symbolSize</td>
								<td></td>
								<td>Size of symbol</td>
							</tr>
							<tr>
								<td>itemStyle</td>
								<td></td>
								<td>see <a href="#ItemStyle">itemStyle</a>. Notice that
									itemStyle in thecategory of force has no nodeStyle under the
									normal(emphasis) option. Instead
									itemStyle.normal(emphasis).color|borderWidth|borderColor will
									be used
								</td>
							</tr>
						</table>

						<h5>
							nodes(data)<a name="nodes(data)"></a>
						</h5>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>Property</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{string}</b> name</td>
								<td></td>
								<td>Name of node</td>
							</tr>
							<tr>
								<td><b>{string}</b> label</td>
								<td></td>
								<td>Label name of the node, name(above) as default.</td>
							</tr>
							<tr>
								<td><b>{number}</b> value</td>
								<td></td>
								<td>Value of name</td>
							</tr>
							<tr>
								<td>{boolean} ignore</td>
								<td>false</td>
								<td>If ignore the node</td>
							</tr>
							<tr>
								<td><b>{string}</b> symbol</td>
								<td>'circle'</td>
								<td>See <a href="#SeriesCartesian" title="">series
										(Cartesian)</a></td>
							</tr>
							<tr>
								<td>{number | Array} symbolSize</td>
								<td></td>
								<td>Size of symbol</td>
							</tr>
							<tr>
								<td>{number} category</td>
								<td>0</td>
								<td>Category index of node</td>
							</tr>
							<tr>
								<td>itemStyle</td>
								<td></td>
								<td>see <a href="#ItemStyle">itemStyle</a>. Notice that
									itemStyle in a single node of force has no nodeStyle under the
									normal(emphasis) option. Instead
									itemStyle.normal(emphasis).color|borderWidth|borderColor will
									be used
								</td>
							</tr>
						</table>

						<h5>
							links<a name="GraphLinks"></a>
						</h5>
						<table cellspacing="0" class="ADoc_table full">
							<tr>
								<th>name</th>
								<th>Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td><b>{string|number}</b> source</td>
								<td></td>
								<td>Index or name of source node</td>
							</tr>
							<tr>
								<td><b>{string|number}</b> target</td>
								<td></td>
								<td>Index or name of target node</td>
							</tr>
							<tr>
								<td><b>{number}</b> weight</td>
								<td>1</td>
								<td>Weight of link</td>
							</tr>
							<tr>
								<td>itemStyle</td>
								<td></td>
								<td>see <a href="#LinkStyle">linkStyle</a>
								</td>
							</tr>
						</table>
						<h5>
							matrix<a name="GraphMatrix"></a>
						</h5>
						<p>Adjacency matrix of graph</p>

						<h4>
							Multi-Level Control<a name="Multi-Level-Control"> </a>
						</h4>
						<P>For shortness' sake, you can fulfill different levels of
							custom needs by these three levels:</P>
						<ul>
							<li>through option.*, set the global unified configuration;</li>
							<li>through option.series.*, set special configuration for
								some specific series. It has a higher priority than the
								configuration with the same name in option.*;</li>
							<li>through option.series.data.*, set special configuration
								for some specific data. It has the highest priority of all.</li>
						</ul>
						<p>
							<img src="./asset/img/doc/multiControl.jpg" title=""
								alt="multi-level control" />
						</P>

						<h3>
							Appendix: Map Extension<a name="Appendix-Map-Extension"> </a>
						</h3>
						<p>
							BMap which is base on map.baidu.com, see <a
								href="../extension/BMap/doc/doc.html" target="_blank">doc</a>, <a
								href="../extension/BMap/doc/BMap.html" target="_blank">example1</a>,
							<a href="../extension/BMap/doc/example.html" target="_blank">example2</a>,
							by <a href="http://weibo.com/wind108369" target="_blank">Ji
								Yang</a>.
						</p>
						<p>
							Supports extended map on <a
								href='http://www.oschina.net/translate/geojson-spec?cmp'
								target="_blank">GeoJson</a> format. Try <a
								href="./example/map6.html#-en" target="_blank">HK 》</a> <a
								href="./example/map7.html#-en" target="_blank">USA 》</a>
						</p>
						<div class="code">
							<pre>
// step1: find the geoJson data file in the target region, like HK_geo.json.

// step2: name your map type in require('echarts/util/mapData/params'), like HK.

// step3: implement the getGeoJson interface method, return the geoJson data file in the target region via callback.
require('echarts/util/mapData/params').params.HK = {
    getGeoJson: function (callback) {
        $.getJSON('geoJson/HK_geo.json',callback);
    }
}

// step3*: In most cases, data maps do not need any special projection algorithm. ECharts uses a simplified projection algorithm, thus some regions may need to be manually adjusted. Through specialArea, you can specify the latitude and longitude coordinates and interval size of some regions, such as:
require('echarts/util/mapData/params').params.USA = {
    getGeoJson: function (callback) {
        $.getJSON('geoJson/USA_geo.json', callback);
    },
    specialArea : {
        Alaska : {              // Move Alaska to the bottom left of the American main continent
            left : -131,        // Starting point of placement: 13 degrees west longitude
            top : 31,           // Starting point of placement: 31 degrees north latitude
            width : 15,         // Size, width and height of the interval are no more than 15 degrees
            height : 15
        },
        Hawaii : {
            left : -112,        // Hawaii
            top : 29,
            width : 5,
            height : 5
        },
        'Puerto Rico' : {       // Puerto Rico
            left : -76,
            top : 26,
            width : 2,
            height : 2
        }
    }
}

// step4: Echarts already has this map type, you can use it in the option.
option.series = [
        {
            type: 'map',
            mapType: 'HK', // Custom extended chart types
            ...
         }
 ]
</pre>
						</div>
						<h3>
							Appendix: Component and Chart Instances<a
								name="Appendix-Component-and-Chart-Instances"> </a>
						</h3>
						<p>In order to enhance features and customizability, ECharts
							team made ​​a difficult decision: open interface instances of
							components and charts. All these components and charts interfaces
							are mounted on instances got by init(eg: myChart), and stored in
							chart and component respectively. For example, you can obtain the
							current map instance via myChart.chart.map, and read and call all
							the properties and methods inside it.</p>
						<p>
							<b style="color: red">【Important】</b>Please note: ECharts
							interfaces are designed on a data-driven basis, not designed for
							open purposes. It is true that you are allowed to access to it
							unlimitedly, or even rewrite it dynamically, but it's also true
							that these actions may affect the chart's performance or
							compatibility when the version is upgraded. So we only listed the
							following methods and properties as the reference (or limit). We
							will do our best to ensure the stability and backward
							compatibility of these methods or properties, and we promise to
							release a notice on changelog should there be any incompatible
							update. However, if you use any method or property that is not
							listed below, you will not get the guarantee. Sorry for the
							trouble.
						</p>

						<h4>
							Appendix: Component Instances<a
								name="Appendix-Component-Instances"> </a>
							</h3>
							<p>The components of ECharts include: timeline, title,
								legend, dataRange, toolbox, tooltip, dataZoom, grid, xAxis,
								yAxis, polar.</p>

							<h4>
								timeline<a name="TimelineInterface"> </a>
							</h4>
							<P>timeline. At most one timeline is allowed in one chart.
								Methods and properties available are:</P>
							<table cellspacing="0" class="ADoc_table full">
								<tr>
									<th>Type</th>
									<th>Name</th>
									<th>Description</th>
								</tr>
								<tr>
									<td><b>{string}</b></td>
									<td>type</td>
									<td>component type, equal to
										config.COMPONENT_TYPE_TIMELINE.</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>play</td>
									<td>play <br />parameters: <b>{number=}</b> index， <b>{boolean=}</b>
										autoPlay, (see below). <br />Return value: <b>{number}</b>
										currentIndex, index to the position of the options array that
										is currently playing. <br />index: specifies the index to the
										position of the options array that needs to be played. If
										unspecified, start to play from the current index. <br />autoPlay:
										specifies whether to play automatically. If unspecified, play
										automatically.
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>stop</td>
									<td>pause <br />parameters: null <br />Return value: <b>{number}</b>
										currendIndex, index to the position of the options array that
										is currently playing.
									</td>
								</tr>

								<tr>
									<td><b>{Function}</b></td>
									<td>next</td>
									<td>next <br />parameters: null <br />Return value: <b>{number}</b>
										currendIndex index to the position of the options array that
										is currently playing.
									</td>
								</tr>

								<tr>
									<td><b>{Function}</b></td>
									<td>last</td>
									<td>last <br />parameters: null <br /> Return value: <b>{number}</b>
										currendIndex, index to the position of the options array that
										is currently playing.
									</td>
								</tr>
							</table>

							<h4>
								tooltip<a name="TooltipInterface"> </a>
							</h4>
							<P>tooltip, a small "hover box" with detailed information
								about the item being hovered over. At most one tooltip is
								allowed in one chart. Methods and properties available are:</P>
							<table cellspacing="0" class="ADoc_table full">
								<tr>
									<th>Type</th>
									<th>Name</th>
									<th>Description</th>
								</tr>
								<tr>
									<td><b>{string}</b></td>
									<td>type</td>
									<td>component type, equal to config.COMPONENT_TYPE_LEGEND.
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>showTip</td>
									<td>show the tooltip. <br />Parameter: <b>{Object}</b>
										param (see below) <br /> Return value: null <br />parameter
										format: { seriesIndex: 0, seriesName:'', dataIndex:0 } //
										line, bar, scatter, candlestick, radar, dataIndex is required,
										specify seriesIndex or seriesName is the same <br />parameter
										format: { seriesIndex: 0, seriesName:'', name:'' } // map,
										pie, chord, dataIndex is required, specify seriesIndex or
										seriesName is the same
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>hideTip</td>
									<td>hide the tooltip. <br />parameters: null<br /> Return
										value: null
									</td>
								</tr>
							</table>

							<h4>
								legend<a name="LegendInterface"> </a>
							</h4>
							<P>Legend, At most one legend is allowed in one chart.
								Methods and properties available are:</P>
							<table cellspacing="0" class="ADoc_table full">
								<tr>
									<th>Type</th>
									<th>Name</th>
									<th>Description</th>
								</tr>
								<tr>
									<td><b>{string}</b></td>
									<td>type</td>
									<td>component type, equal to config.COMPONENT_TYPE_LEGEND.
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>isSelected</td>
									<td>relevant to legend switch, determines whether the name
										passed in is currently turned on. <br />Parameters: <b>{string}</b>
										name <br /> Return value: <b>{boolean}</b>. If true, it's on;
										if false, it's off.
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getSelectedMap</td>
									<td>relevant to legend switch, gets the off and on states
										of all the current legend switches. <br />Parameters: null <br />Return
										value: <b>{Object}</b> {name:value}. If true, it's on; if
										false, it's off.
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getColor</td>
									<td>relevant to legend color, gets the color corresponding
										to the name passed in. If the name is not included in the
										existing data item of the legend, a new color will be
										generated to match the name and the color will be returned. <br />Parameters:
										<b>{string}</b> name <br /> Return value: <b>{color}</b>
										matched color
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>setColor</td>
									<td>relevant to legend color, sets the color corresponding
										to some series (data). When the color is changed, the chart
										will not automatically refresh; call the refresh method of the
										instance if you need to get the chart updated. <br />Parameters:
										<b>{string}</b> name, <b>{color}</b> matched color <br />
										Return value: null
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>setSelected</td>
									<td>sets the selection mode of some series (data). <br />Parameters:
										<b>{string}</b> name, <b>{boolean}</b> status <br /> Return
										value: null
									</td>
								</tr>
							</table>

							<h4>
								dataRange<a name="DataRangeInterface"> </a>
							</h4>
							<P>dataRange, at most one dataRange control is allowed in one
								chart. Methods and properties available are:</P>
							<table cellspacing="0" class="ADoc_table full">
								<tr>
									<th>Type</th>
									<th>Name</th>
									<th>Description</th>
								</tr>
								<tr>
									<td><b>{string}</b></td>
									<td>type</td>
									<td>component type, equal to
										config.COMPONENT_TYPE_DATARANGE.</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getColor</td>
									<td>relevant to color of the dataRange control, gets the
										color corresponding to the name passed in. <br />Parameters: <b>{number}</b>
										value <br /> Return value: <b>{color}</b> matched color
									</td>
								</tr>
							</table>
							<p>
								<img src="./asset/img/doc/dataRange.png" title=""
									alt="dataRange" />
							</P>

							<h4>
								dataZoom<a name="DataZoomInterface"> </a>
							</h4>
							<P>dataZoom interface. Synchronized with
								toolbox.feature.dataZoom. Applicable to Cartesian chart only.
								Methods and properties available are:</P>
							<table cellspacing="0" class="ADoc_table full">
								<tr>
									<th>Type</th>
									<th>Name</th>
									<th>Description</th>
								</tr>
								<tr>
									<td><b>{string}</b></td>
									<td>type</td>
									<td>component type, equal to
										config.COMPONENT_TYPE_DATAZOOM</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>absoluteZoom</td>
									<td>dataZoom. <br />Parameters: <b>{Object}</b> {start :
										value, end : value, start2 : value, end2 : value} (zoom
										parameters). <br /> Return value: null. Role: change the data
										display area according to the value passed in. The valid range
										is [0,100]. In most cases, you just need to specify the start
										and end of dataZoom in the primary region. In scatter, you can
										use dataZoom in two dimensions simultaneously, via
										additionally specifying start2, end2.
									</td>
								</tr>
							</table>
							<p>
								<img src="./asset/img/doc/dataZoom.png" title="" alt="数据区域缩放" />
							</P>

							<h4>
								grid<a name="GridInterface"> </a>
							</h4>
							<P>grid. Methods and properties available are:</P>
							<table cellspacing="0" class="ADoc_table full">
								<tr>
									<th>Type</th>
									<th>Name</th>
									<th>Description</th>
								</tr>
								<tr>
									<td><b>{string}</b></td>
									<td>type</td>
									<td>component type, equal to config.COMPONENT_TYPE_GRID.</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getX</td>
									<td>abscissa of the grid's upper left corner, in px. <br />Parameters:
										null. <br /> Return value: <b>{number}</b> coordinate value
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getXend</td>
									<td>abscissa of the grid's lower right corner, in px. <br />Parameters:
										null. <br /> Return value: <b>{number}</b> coordinate value
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getY</td>
									<td>ordinate of the grid's upper left corner, in px. <br />Parameters:
										null. <br /> Return value: <b>{number}</b> coordinate value
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getYend</td>
									<td>ordinate of the grid's lower right corner, in px.<br />Parameters:
										null. <br /> Return value: <b>{number}</b> coordinate value
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getWidth</td>
									<td>the width of the grid, in px. <br />Parameters: null.
										<br /> Return value: <b>{number}</b> width value
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getHeight</td>
									<td>the height of the grid, in px. <br />Parameters: null.
										<br /> Return value: <b>{number}</b> height value
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getArea</td>
									<td>the area data of the grid. Equal to all the return
										values of getX, getY, getWidth, getHeight. <br />Parameters:
										null. <br /> Return value: <b>{Object}</b> {x : value, y :
										value, width : value, height : value}
									</td>
								</tr>
							</table>
							<p>
								<img src="./asset/img/doc/grid.jpg" title="" alt="grid" />
							</P>

							<h4>
								xAxis/yAxis<a name="AxisInterface"> </a>
							</h4>
							<P>horizontal/vertical axis. Methods and properties available
								are:</P>
							<table cellspacing="0" class="ADoc_table full">
								<tr>
									<th>Type</th>
									<th>Name</th>
									<th>Description</th>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getAxis</td>
									<td>Gets the axis instance of the index passed in. There
										are at most four axes (to the side, or up, or down) in a
										Cartesian chart. Axes can be either category axis or value
										axis. For the axis instance and available axis methods, see
										the section below. <br />Parameters: <b>{number}</b> 0/1 (axis
										index)<br /> Return value: {categoryAxis | valueAxis},
										specifies the axis instance of the index. It can be either
										category axis or value axis.
									</td>
								</tr>
							</table>

							<h4>
								categoryAxis<a name="CategoryAxisInterface"> </a>
							</h4>
							<P>category axis. Methods and properties available are:</P>
							<table cellspacing="0" class="ADoc_table full">
								<tr>
									<th>Type</th>
									<th>Name</th>
									<th>Description</th>
								</tr>
								<tr>
									<td><b>{string}</b></td>
									<td>type</td>
									<td>component type, equal to
										config.COMPONENT_TYPE_AXIS_CATEGORY.</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getCoord</td>
									<td>calculates the drawing position according to the value
										of category name, in px. <br />Parameters: <b>{string}</b>
										name <br /> Return value: <b>{number}</b> coordinate value. If
										there are category values with the same name, return the value
										that is matched first.
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getCoordByIndex</td>
									<td>calculates the drawing position according to the
										category axis data index, in px. <br />Parameters: <b>{number}</b>
										index <br /> Return value: <b>{number}</b> coordinate value.
										When the index is less than 0, return the starting point of
										the coordinate; when the index is greater than the length of
										the category, return the end point of the coordinate.
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getNameByIndex</td>
									<td>calculates the category axis name according to the
										category axis data index. <br />Parameters: <b>{number}</b>
										index <br /> Return value: <b>{string}</b> name
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getIndexByName</td>
									<td>calculates the category axis data index according to
										the category axis name. <br />Parameters: <b>{string}</b> name
										<br /> Return value: <b>{number}</b>Index. If there are
										category values with the same name, return the value that is
										matched first.
									</td>
								</tr>
							</table>

							<h4>
								valueAxis<a name="ValueAxisInterface"> </a>
							</h4>
							<P>value axis. Methods and properties available are:</P>
							<table cellspacing="0" class="ADoc_table full">
								<tr>
									<th>Type</th>
									<th>Name</th>
									<th>Description</th>
								</tr>
								<tr>
									<td><b>{string}</b></td>
									<td>type</td>
									<td>component type, equal to
										config.COMPONENT_TYPE_AXIS_VALUE.</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getCoord</td>
									<td>calculates the drawing position according to the
										value, in px. <br />Parameters: <b>{number}</b> value <br />Return
										value: <b>{number}</b> coordinate value
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getExtremum</td>
									<td>returns the extremes of the current axis. <br />Parameters:
										null，<br /> Return value: <b>{Object}</b> {min:{number},
										max:{number}}
									</td>
								</tr>
							</table>

							<h4>
								polar<a name="PolarInterface"> </a>
							</h4>
							<P>polar coordinates. Methods and properties available are:</P>
							<table cellspacing="0" class="ADoc_table full">
								<tr>
									<th>Type</th>
									<th>Name</th>
									<th>Description</th>
								</tr>
								<tr>
									<td><b>{string}</b></td>
									<td>type</td>
									<td>component type, equal to config.COMPONENT_TYPE_POLAR.
									</td>
								</tr>
								<tr>
									<td><b>{Function}</b></td>
									<td>getVector</td>
									<td>Gets the coordinates corresponding to some value in
										each indicator, in px. <br />Parameters: <b>{number}</b>
										polarIndex, <b>{number}</b> indicatorIndex, <b>{number}</b>
										value <br /> Return value: <b>{Array}</b> [x, y] coordinate
										value
									</td>
								</tr>
							</table>

							<h4>
								Appendix: Chart Instances<a name="Appendix-Chart-Instances">
								</a>
								</h3>
								<p>Chart types supported in ECharts include: line, bar,
									scatter, candlestick, pie, radar, chord, force, map.</p>

								<h4>
									map<a name="MapInterface"> </a>
								</h4>
								<P>map. Methods and properties available are:</P>
								<table cellspacing="0" class="ADoc_table full">
									<tr>
										<th>Type</th>
										<th>Name</th>
										<th>Description</th>
									</tr>
									<tr>
										<td><b>{string}</b></td>
										<td>type</td>
										<td>chart type, equal to config.CHART_TYPE_MAP.</td>
									</tr>
									<tr>
										<td><b>{Function}</b></td>
										<td>getPosByGeo</td>
										<td>Converts geographic coordinates to plane coordinates,
											in px. <br />Parameters: <b>{string}</b> mapType (map type),
											<b>{Array}</b> [ew,ns] (geographic coordinates)<br /> Return
											value: <b>{Array}</b> [x, y] (plane coordinates).
										</td>
									</tr>
									<tr>
										<td><b>{Function}</b></td>
										<td>getGeoByPos</td>
										<td>Converts plane coordinates to geographic coordinates,
											in px. <br />Parameters: <b>{string}</b> mapType (map type),
											<b>{Array}</b> [x, y] (plane coordinates) <br /> Return
											value: <b>{Array}</b> [ew,ns] (geographic coordinates).
										</td>
									</tr>
								</table>

								<h3>
									Appendix: an Intuitive Example<a
										name="Appendix-an-Intuitive-Example"> </a>
								</h3>
								<p>
									For more examples, click <a href="example-en.html"
										target="_blank">example</a>. Use this <a
										href="example/demo.html#-en" target="_blank">demo</a> or <a
										href="example/www/index.html" target="_blank">ECharts
										single file import</a> as your template.
								</p>
								<div class="code" style="margin-bottom: 25px;">
									<pre style="margin-bottom: 0;">// instantiate the chart------------------
// script plain import
var myChart = echarts.init(document.getElementById('main'));

// loading---------------------
myChart.showLoading({
    text: &#39;We're building the buildings as fast as we can...please wait! &#39;,    //loading text
});

// ajax getting data...............

// ajax callback
myChart.hideLoading();

// use the chart-------------------
var option = {
    legend: {                                   // legend configuration
        padding: 5,                             // The inner padding of the legend, in px, defaults to 5. Can be set as array - [top, right, bottom, left].
        itemGap: 10,                            // The pixel gap between each item in the legend. It is horizontal in a legend with horizontal layout, and vertical in a legend with vertical layout.
        data: ['ios', 'android']
    },
    tooltip: {                                  // tooltip configuration
        trigger: 'item',                        // trigger type. Defaults to data trigger. Can also be: 'axis'
    },
    xAxis: [                                    // The horizontal axis in Cartesian coordinates
        {
            type: 'category',                   // Axis type. xAxis is category axis by default. As for value axis, please refer to the 'yAxis' chapter.
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }
    ],
    yAxis: [                                    // The vertical axis in Cartesian coordinates
        {
            type: 'value',                      // Axis type. yAxis is value axis by default. As for category axis, please refer to the 'xAxis' chapter.
            boundaryGap: [0.1, 0.1],            // Blank border on each side of the coordinate axis. Value in the array represents percentage.
            splitNumber: 4                      // Applicable to value axis. The number of segments. Defaults to 5.
        }
    ],
    series: [
        {
            name: 'ios',                        // series name
            type: 'line',                       // chart type, line, scatter, bar, pie, radar
            data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
        },
        {
            name: 'android',                    // series name
            type: 'line',                       // chart type, line, scatter, bar, pie, radar
            data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
        }
    ]
};
myChart.setOption(option);

...

// Add some data------------------
option.legend.data.push('win&#39);
option.series.push({
        name: 'win',                            // series name
        type: 'line',                           // chart type, line, scatter, bar, pie, radar
        data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);

...

// Clear the chart-------------------
myChart.clear();

// Dispose the chart-------------------
myChart.dispose();
</pre>
								</div>
					</div>
				</div>
			</div>
		</div>
		<!--/.fluid-container-->

		<!-- FOOTER -->
		<footer id="footer"></footer>

		<script src="./asset/js/jquery.min.js"></script>
		<script type="text/javascript" src="./asset/js/echartsHome.js"></script>
		<script src="./asset/js/bootstrap.min.js"></script>
		<script src="asset/js/echartsConfig.js"></script>
		<script src="asset/js/echartsDoc.js"></script>
</body>
</html>
